Question

我是角色的新手，我有以下代码：

这是我的HTML：

<drawer title="'Add a new Item'"
         visible="showAddItemDrawer"
         on-close="showAddApplicationItem = false">
    <!-- items list refresh does not work from inside the drawer. -->
     <add-item></add-item> 
</drawer>
<!--list refresh works if i place the code out here.
    <add-item></add-item> -->

<div ng-repeat="item in itemList">
    <item-list></item-list>
</div>

这是我的指令.js：

directive("additem", function () {
     return {
        restrict:"E",
        transclude:true,
        controller:"ItemsCtrl",
        templateUrl:"partials/add-item.html" //contains a form to add item
     };
})

.directive("itemlist", function () {
   return {
      restrict:"E",
      transclude:true,
      templateUrl:"partials/item-list.html" //contains code to display the items in a list
   };
})

我在add-item.html中有一个表单来添加项目。单击添加按钮（如手风琴）时，表单会显示。我调用push（）将新项添加到范围。

如果我将指令调用放在抽屉之外，则列表更新有效。如果我把它放在抽屉里，直到我点击刷新后范围才会更新。

有人能指出我对指令的错误吗？非常感谢！

修改：添加了其他代码：

在添加项目的表单中

<button type="submit"
        ng-click="addItemService()">
    Add Item
</button>

addItemService（）代码：

$scope.addItemService = function () {
    var data = {
      "name": $scope.itemName,
     };
    ItemService.addItem(data, $scope.listgroupid)
       .success(function (result) {
            $scope.itemName = "";
            viewList(); //The function that sets the scope of the list
        })
        .error(function () {
        });
};

viewlist（）代码：

var viewList = function () {
   ListService.getList($scope.listgroupid)
       .success(function (result) {
           $scope.itemList = result;
           //In the angular inspector, I am able to see the new item in the variable result
       })
      .error(function () {
      });
};

Answer 1

编辑：函数范围与变量范围不同，在引用新变量值时使用$scope.$parent.itemList

Answer 2

我遇到了一个问题，其中指令范围（在调试时）和batarang检查范围（在开发工具中选择元素并在控制台中键入$ scope.varname）在成功解决的承诺后不匹配。

promise会更新包含指令的ng-repeat列表。

调试范围保留了promise在加载新数据之前的最后一个数据的值。

所以我在数据加载的事件广播周围添加了一个超时，它将广播推送到下一个摘要周期，并且角度获得有关更新的信息。 $ scope。$ apply经常抛出＆＃34;申请已经在进行中＆＃34;错误。超时解决了这个问题......

$timeout( function () {
    // broadcast down to all directive children
    $scope.$broadcast('dataLoaded');
}, 1);

Answer 3

需要查看您正在调用push for item的代码。

如果没有，我怀疑这是范围问题。请记住，默认情况下，ngRepeat和抽屉驻留在差异范围内，直到您明确地让它们共享某些变量为止，抽屉内的更改不会反映在ngRepeat中。有关指令内部范围的更多信息，请阅读http://docs.angularjs.org/api/ng。$ compile。

＆＃39;隔离＆＃39; scope接受一个定义一组local的对象hash   从父作用域派生的作用域属性。这些当地的财产   对模板的别名值很有用。当地人的定义是   本地范围属性的哈希值来源：

@或@attr - 将本地范围属性绑定到DOM的值   属性。由于DOM属性，结果总是一个字符串   字符串。如果未指定attr名称，则属性名称为   假设与本地名称相同。范围的给定和小部件定义：{localName：＆＃39; @ myAttr＆＃39; }，   那么widget作用域属性localName将反映插值   hello {{name}}的值。由于名称属性发生了变化，因此   小部件范围上的localName属性。该名称是从   父范围（不是组件范围）。

=或= attr - 在本地范围属性和通过值定义的名称的父范围属性之间设置双向绑定   oftr属性。如果未指定attr名称，则为该属性   假定name与本地名称相同。给定范围的小部件定义：{   localModel：＆＃39; = myAttr＆＃39;然后，widget作用域属性localModel将   反映父范围内parentModel的值。任何改变   parentModel将反映在localModel和任何更改中   localModel将反映在parentModel中。如果是父范围属性   它不存在，它会抛出一个NON_ASSIGNABLE_MODEL_EXPRESSION   例外。你可以使用=？避免这种行为？或=？attr以便   将该属性标记为可选。

＆安培;或＆amp; attr - 提供在上下文中执行表达式的方法   父范围。如果未指定attr名称，则为属性名称   假定与本地名称相同。给定范围的小部件定义：{   localFn：＆＃39;＆安培; myAttr＆＃39;然后隔离范围属性localFn将指向   count = count + value表达式的函数包装器。经常   希望通过表达式从隔离范围传递数据   对于父作用域，可以通过传递本地地图来完成   变量名和值到表达式包装器fn中。例如，   如果表达式是增量（金额），那么我们可以指定金额   通过将localFn调用为localFn（{amount：22}）来获取值。

Answer 4

您可以使用$ rootScope。$ broadcast（）来触发您的指令将捕获的事件，然后让指令使用ng-repeat更新列表，或者您可以调用$ scope。$ apply（）with在控制器中包含更新的更新，以指示更新列表的角度，但是当使用$ scope时，$ apply（）要小心，并确保它被延迟/推迟到下一个摘要周期。一个名为Underscore.js的库允许你延迟$ apply直到下一个摘要周期。

AngularJS：ng-repeat list not updating - 指令

4 个答案: