我在尝试对 ng-if 内的元素执行 DOM 操作语句时遇到问题。
我认为这里的问题是当操作代码运行时 DOM 还没有准备好。
有没有一种方法可以在没有指令的情况下做到这一点？
示例(通过复选框在 ng-if 句柄内二选一):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Select2 Test</title>
<link rel="stylesheet" type="text/css" href="./bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./bower_components/select2/dist/css/select2.css">
</head>
<body ng-app="Myapp">
<div class="container" ng-controller="Select2Controller">
<div class="row">
<div class="col-sm-12">
<select id="myselect" style="width:200px;">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<input type="checkbox" name="toogle" ng-model="checked">Show ng-if nested select</input>
<div ng-if="checked">
<select id="myselect2" style="width:200px;">
<option value="4">option4</option>
<option value="5">option5</option>
<option value="6">option6</option>
</select>
</div>
</div>
</div>
</div>
<script src="./bower_components/jquery/dist/jquery.js" ></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js" ></script>
<script src="./bower_components/angular/angular.js" ></script>
<script src="./select.ctrl.js" type="text/javascript"></script>
<script src="./app.js" type="text/javascript"></script>
</body>
</html>
Controller :
var app = angular.module("Myapp", []);
app.controller("Select2Controller", function($scope) {
$scope.checked = false;
$( document ).ready(function() {
//This code works
$("#myselect").append("<option value='4'>new option</option>");
});
$scope.$watch('checked', function (newVal, oldVal) {
if (newVal && $scope.checked) {
$(document).ready(function () {
//Not works
$("#myselect2").append("<option value='7'>new option</option>");
});
}
});
});
第一个选择表现良好，但第二个选择保持相同，在这种情况下没有添加选项。
我尝试了其他句子并发生了相同的历史。 ng-show 因其本质而有效(隐藏的元素是可以操纵的)，但它不符合我的需要。
我正在寻找一般答案，添加和选项只是一个例子。该句子可以是任何操作嵌套 ng-if 元素的内容。
有什么想法或解决方案吗？谢谢
最佳答案
为什么不使用 ng-if 作为该选项？喜欢:
<div ng-if="checked">
<select id="myselect2" style="width:200px;">
<option value="4">option4</option>
<option value="5">option5</option>
<option value="6">option6</option>
<option ng-if="something" value="7">option7</option>
</select>
</div>
关于javascript - 如何在不使用指令的情况下操作 ng-if 内的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34532291/