Question

在我的一个Angular.JS控制器中，我有以下内容：

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">

这与指令绑定：

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

模板文件是：

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

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

Answer 1

我建议您在指令中进行一些结构性更改。

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

<message messages="messages">

然后你可以在你的指令模板中实际移动ng-repeat部分，[你必须注意，因为你在message: "="中使用=，=将本地/指令范围属性绑定到父范围属性。因此，使用=，您可以使用父模型/范围属性名称作为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>

你可以找到一个演示plunker here

附加到与Angular.JS指令绑定的数组

1 个答案: