Javascript 如何在不使用指令的情况下操作ng if中的元素

我在为ng if中的元素执行DOM操作语句时遇到问题

我认为这里的问题是，当操作代码运行时，DOM还没有准备好

有没有一种方法可以在没有指令的情况下做到这一点

示例（如果通过复选框处理，则在ng中选择一个）：

选择2测试
选择1
选择2
选择3
如果选择嵌套，则显示ng
选择4
选择5
选择6

控制器：

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>");
            });  
        }
    });

});

$scope.select = [
    {value: 4, label: 'option 4'},
    {value: 5, label: 'option 5'},
    {value: 6, label: 'option 6'},
];

app.controller("Select2Controller", function($scope) {

  $scope.checked = false;
  $scope.options = ['option1', 'option2'];

  $scope.$watch('checked', function (newVal, oldVal) {
    if (newVal) {
      $scope.options.push('option3');  
    } else {
      $scope.options.pop();
    }
  });
});

var-app=angular.module（“Myapp”，[]）；
应用控制器（“Select2Controller”，功能（$scope）{
$scope.checked=false；
$（文档）.ready（函数（）{
//此代码有效
$（“#myselect”）。追加（“新选项”）；
});
$scope.$watch（'checked'，函数（newVal，oldVal）{
if（newVal&&$scope.checked）{
$（文档）.ready（函数（）{
//不行
$（“#myselect2”）。追加（“新期权”）；
});  
}
});
});

第一个选择行为良好，但第二个选择保持不变，在本例中未添加任何选项

我试过其他句子，但都发生了同样的事情。ng show的工作是因为它的性质（隐藏的元素可以被操纵），但它不适合我的需要

---

我正在寻找一个一般性的答案，add和option只是一个例子。这个句子可以是任何操纵嵌套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>

选择4
选择5
选择6
选择7

使用

ng repeat

：

控制器：

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>");
            });  
        }
    });

});

$scope.select = [
    {value: 4, label: 'option 4'},
    {value: 5, label: 'option 5'},
    {value: 6, label: 'option 6'},
];

app.controller("Select2Controller", function($scope) {

  $scope.checked = false;
  $scope.options = ['option1', 'option2'];

  $scope.$watch('checked', function (newVal, oldVal) {
    if (newVal) {
      $scope.options.push('option3');  
    } else {
      $scope.options.pop();
    }
  });
});

视图：

{{option.label}

---

然后您的选择是动态的。稍后，当您想添加更多选项时，只需使用

$scope.select.push（{value:7，标签：'option7'}）等
您是否尝试更改此项：

$scope.$watch('checked', function (newVal, oldVal) {
    if (newVal && $scope.checked) {
        $(document).ready(function () {
            //Not works
            $("#myselect2").append("<option value='7'>new option</option>");
        });  
    }
});

$scope.$watch（'checked'，函数（newVal，oldVal）{
if（newVal&&$scope.checked）{
$（文档）.ready（函数（）{
//不行
$（“#myselect2”）。追加（“新期权”）；
});  
}
});

为此：

$scope.$watch('checked', function (newVal, oldVal) {
    if (newVal && $scope.checked) {
        $timeout(function(){
            $("#myselect2").append("<option value='7'>new option</option>");
        });  
    }
});

$scope.$watch（'checked'，函数（newVal，oldVal）{
if（newVal&&$scope.checked）{
$timeout（函数（）{
$（“#myselect2”）。追加（“新期权”）；
});  
}
});

$timeout
的更多信息可以在：$timeout
中找到，我假设“没有指令”是指没有自定义指令

您可以使用ngOptions指令将选择选项绑定到作用域上的数组：

HTML:

@我不是在要求设计，代码只是为了测试/显示问题。setTimeout函数的设计也很糟糕。谢谢你的回答和建议。问题到底是什么？我给了你3个答案，所有答案都完全符合你的目标，但没有一个是“正确答案”。我会用或做整个选择。我甚至不明白为什么要为一个甚至不可见的select附加一个选项。既然整个选择不可见，为什么“新选项”不能在选择中？我知道你是否有复选框来切换“选择可见性”和另一个复选框/选择来添加/删除选项。@Kirbo我说向“选择”添加元素只是一个例子。可能是另一种标签和其他需要完成的任务。SetTimeout这是一种肮脏的处理方式。指令可能是AngularJS中处理DOM操作的强制方式。最好的评论/回答是Ethinar的。我真的很感谢你的努力。我认为我的问题的出发点不好。我正在寻找一个一般性的答案，add和option只是一个例子。这个答案提出了一个很好的观点。如果您是以角度的方式做事，为什么要将其与JS/jQuery混合使用，尤其是在应用程序控制器级别？一般来说，一路依赖并以角度工作比仅仅使用一些片段要好得多，部分原因是您在发布代码时遇到的问题here@Ethnar伟大的评论，但没有回答如何解决这个“非角度的方式”。我不认为这是不可能的。只是好奇。是的，它解决了这个问题，但是说“等待足够的时间让DOM准备就绪”而不是说元素准备就绪->运行代码。