javascript - 附加到与 Angular.JS 指令关联的数组

Question

在我的一个 Angular.JS Controller 中，我有以下内容:

app.controller("MyController", ["$scope", function($scope){
    $scope.messages = [
        new Message(1),
        new Message(2)
    ];
    $scope.addMessage = function(x) { $scope.messages.push(new Message(x)); }
}]);

然后在我的 HTML 主页面中，我有

<message message="message" ng-repeat="message in messages">

这绑定(bind)到指令:

app.directive("message", function() {
    return {
        restrict: "E",
        scope: {
            message: "="
        },
        templateUrl: "js/Directives/message.html"
   };
});

模板文件是:

<li class="message">{{message.msg}} </li>

但是，当我在 Controller 上调用 addMessage 时，虽然它确实添加到 $scope.messsages，但它实际上并没有刷新 ng-repeat 并显示新消息。我怎样才能做到这一点？

Answer 1

我建议对您的指令进行一些结构性改变。

首先，为什么不引用原始数组本身而不是在每次迭代时引用值？？

<message messages="messages">

然后，您实际上可以在指令模板中移动 ng-repeat 部分，[您必须注意，由于您在 message: "=" 中使用 =，= 绑定(bind)了本地/指令范围属性到父范围属性。因此，使用 = 时，您可以使用父模型/范围属性名称作为 DOM 属性的值。 ].

因此您的指令将如下所示:

app.directive("message", function() {
    return {
        restrict: "E",
        scope: {
            messages: "="
        },
        templateUrl: "js/Directives/message.html"
   };
});

随后的模板将如下所示:

    <ul>
        <li ng-repeat="message in messages" class="message">{{message.msg}} </li>
    </ul>

您可以找到一个演示插件 here