Question

我正在玩孤立范围的角度指令。我刚遇到了一个有趣的情况。当我从本地范围调用一个函数来更改$ scope变量内容时，这不会影响DOM。在我的示例中，我向$ scope.customers列表添加了一个新元素，这不会触发ngRepeat，因此DOM的这部分不会受到影响，而应该呈现ngRepeat项目。

指令代码：

function addItem() {
    scope.add();
        items.push({
        name: 'New Directive Customer'
    });
    scope.$broadcast("refresh");
    render();
}
...
return {
  restrict: 'EA',
  scope: {
      datasource: '=',
      add: '&',
    },
    link: link
};

本地功能代码：

$scope.addCustomer = function() {
    counter++;
    $scope.customers.push({
        name: 'New Customer' + counter,
        street: counter + ' Cedar Point St.'
    });

    alert($scope.customers.length);
};

DOM ngRepeat部分：

<isolate-scope-with-controller datasource="customers" add="addCustomer()"></isolate-scope-with-controller>
<hr />
<div>
    <ul>
        <li ng-repeat="customer in customers">{{customer.name}}</li>
    </ul>
</div>

alert()将显示每次点击按钮后$scope.customers更大，但ngRepeat不会在DOM上工作。

完整代码： http://plnkr.co/edit/8tUzKbKxK0twJsB6i104

我的问题是，是否有可能以某种方式从这种指令触发DOM更改？

提前致谢

Answer 1

在删除指令的click-callback中的event.srcElement.id检查后，你的plunkr只对我有用。

[self.navigationController setNavigationBarHidden:YES animated:YES]

在控制器中，您必须使用$ scope。$ apply以使更改显示在模板中：

 function addItem() {
      //Call external function passed in with &
      scope.add();

      //Add new customer to the local collection
      items.push({
          name: 'New Directive Customer'
      });


      scope.$broadcast("refresh");
      render();
  }

http://cs.nyu.edu/wies/teaching/ppc-14/material/lecture02.pdf

具有孤立范围的Angularjs指令不会在指令之外触发DOM更改

1 个答案: