angularjs - 将 AngularJS 指令绑定到数组的映射

Question

我有一个接受对象数组的指令。在标记中声明指令时，作用域有一个对象数组，这些对象包装了指令所需的对象。所以我需要在数组上应用一个映射函数。这样做的正确方法是什么，以便对原始数组所做的更新反映在指令中？

这是一个采用天真的方法的 Plunker（我很惊讶地看到除了很多 $digest 错误之外大部分都是“工作”）： http: //plnkr.co/edit/GUCZ3c

Answer 1

您应该避免从 Angular 表达式调用函数，除非该函数做一些非常轻量级的工作（例如快速计算）。这个问题有更多关于这个问题的细节。

在您的情况下，您应该缓存名称列表并将其绑定到指令。这是一个例子：

app.controller('MainCtrl', function($scope) {  
    $scope.people = [
        { name: 'Alice'}, 
        { name: 'Bob' },
        { name: 'Chuck' }
    ];

    $scope.addName = function(name) {
        $scope.people.push({name: name});
    };

    $scope.$watch(function() { return $scope.people.length; }, function() {
        $scope.names = $scope.people.map(function(p) { return p.name; });
    });
});

您的指令代码保持不变。这是你的 Plunker 的一个叉子。

更新：我已经更改了代码，因此它使用 a$watch自动更新名单，遵循@KrisBraun 的建议。

Answer 2

我相信在将表达式绑定到您的隔离范围时，您需要对它们进行一些不同的处理。这是一个分叉的 plunker。

app.directive('myDirective', function($compile) {
  return {
    restrict: 'E',
    scope: {
      names: '&namesFunc'
    },
    template: '<div><p>JSON: {{names() | json}}</p><p>Names:</p><ul><li ng-repeat="name in names()">{{name}}</li></ul></div>',
    replace: true,
    link: function(scope, elem, attr, ctrl) {
    }
  };
});