Question

我有一个模拟带图像的简单复选框的指令：

movieApp.directive("imageCheckbox",
function()
{
    return {
        restrict: "E",
        scope: { ngModel: '=' },
        template:
            '<div ng-switch on="ngModel"> \
                <div ng-switch-when="true"> \
                    <img src="/Content/Images/CheckTrue.png" ng-click="onClick()"> \
                </div> \
                <div ng-switch-default> \
                    <img src="/Content/Images/CheckFalse.png" ng-click="onClick()"> \
                </div> \
            </div>',
        link: function(scope, element, attrs)
        {
            scope.onClick = function()
            {
                scope.ngModel = !scope.ngModel;
            };
        }
    };
});

这在ng-repeat之外正常工作。但是，在ng-repeat内部，它不会双向绑定到ngModel。

ng-repeat位于表格中，如下所示：

<tr class="movie-info-row" ng-repeat="movie in movies">
<div class="movie-checkbox">
    <image-checkbox ng-model="isSelectedToDownload" ng-click="onSelectToDownloadClick(movie.RefId)" />
</div>

表格行中有很多内容，但这与此无关。 onSelectToDownloadClick处理程序工作并为我提供了正确的movie.RefId，但我的范围上的isSelectedToDownload标记未更新。它在ng-repeat之外更新。

有什么想法吗？

Answer 1

我终于弄清楚了这一点，也许它对其他人也很有用：

ng-repeat指令创建自己的子作用域，它原型继承自父作用域。

通过在scope.ngModel = !scope.ngModel;函数中分配onClick，我实际上在子范围上创建了一个新变量ngModel，从而隐藏了父ngModel个变量并禁用双向绑定。

解决方案？有几个。我选择了controller-as语法（将控制器设置为vm），然后调用如下：

<image-checkbox ng-model="vm.isSelectedToDownload" ng-click="onSelectToDownloadClick(movie.RefId)" />

我不能自己改变原型继承的变量;但是我可以改变它们的属性。

ng-repeat内的Angular指令不是双向绑定

1 个答案: