Question

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

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

我想要做的是 - 让控制器内的功能适用于动态添加的ul。我的猜测是，当页面加载时，ul块被视为在控制器之外，因此它不起作用。在搜索时，我能够看到涉及$ compile的solution，但这适用于ng-model，而不是重复或{{}}。我是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这里的“编译/链接分离背后的原因”部分，他们解释了为什么ng-repeat的编译不同。任何人都可以解释它究竟意味着什么和/或如何去做？我尝试编译 - 任何不在ng-repeat工作中的东西，但ng-repeat内的任何东西都没有。

Answer 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上的语法可能有些偏差。）

Answer 2

在控制器中操作DOM并不是一种好习惯。除此之外，不是 $ scope。$ apply（）帮助？

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

如何让Angular适用于动态添加的对象

2 个答案: