如何让 Angular 为动态添加的对象工作答案

【问题标题】：How to get Angular to work for dynamically added object如何让 Angular 为动态添加的对象工作
【发布时间】：2012-12-20 18:45:58
【问题描述】：

我有两个文件，如下所述。我在 file_1.php 中定义控制器

在 file_2.php 中，我“需要”file_1.php，然后将 ul 移动到 file_1.php 中描述的 div 中

我想要做的是 - 让控制器中的函数为动态添加的 ul 工作。我的猜测是，当页面加载时，ul 块被视为在控制器之外，因此它不起作用。在搜索时，我能够看到一个涉及 $compile 的solution，但它适用于 ng-model，而不适用于 repeat 或 {{}}。我是 Angular 的新手，如果有任何帮助，我将不胜感激。

file_1.php

<?php
   <div id="box_1" ng-controller="MyCtrl"></div>
?>

file_2.php

<?php
   require 'file_1.php';
?>

<ul>
   <li ng-repeat="item in items">item.text</li>
</ul>

{{items}}

<script>
   function MyCtrl($scope) {
      $scope.items = [{text: "Item 1", text: "Item 2"}];
   }

   $(document).ready(function() {
          $('#box_1').append($('ul'));
   })
</script>

我发现的一些信息： 在documentation here 的“编译/链接分离背后的原因”部分下，他们解释了为什么 ng-repeat 的编译不同。谁能解释它的确切含义和/或解决方法？我尝试编译 - 任何不在 ng-repeat 中的东西都可以工作，但 ng-repeat 中的任何东西都不能。

【问题讨论】：

我认为你应该使用指令来做这种事情。实际上，你能解释一下你到底想在这里做什么吗？我的意思是你为什么要这样做？
我有一些通过 php 生成的内容，还有一些是静态 html 的内容。 php 在多个 html 文件中重复使用。所以控制器就在那里。
您是否查看了 ng-include 以将 ul 包含在 #box_1 中？
我不能在 #box_1 内使用 ng-include，因为我在 file_2 内加载 #box_1 而不是相反

标签： angularjs

【解决方案1】：

出于某种原因，您是否喜欢这种文件结构？你试图做的事情违背了角度，因此会很痛苦。 Angular 应该让你摆脱使用 jQuery 操作 DOM 的痛苦。

不过，使用$compile 似乎应该可行。你能告诉我们你想用它做什么吗？

为什么你不能做这样的事情？

<div id="box_1" ng-init="items = [{text: "Item 1", text: "Item 2"}]">
    <ul>
        <li ng-repeat="item in items">{{item.text}}</li>
    </ul>

    {{items}}
</div>

（ng-init 的语法可能有点不对。）

【讨论】：

不应该是{{ item.text }} 吗？
我这样做的原因是因为我使用'require'在多个文件中重用file_1.php，例如在file_2中。 file_1 的内容是通过 php 生成的，但在文件之间是通用的。因此，我无法初始化 file_1 中可能在 file_2 中使用但不在 file_3 中使用的任何内容。是的，我意识到 Angular 不能与 DOM 操作结合使用。

【解决方案2】：

在控制器中操作 DOM 不是一个好习惯。除此之外，$scope.$apply() 没有帮助吗？

$(document).ready(function() {
      $('#box_1').append($('ul'));
      $scope.$apply();
})

【讨论】：