AngularJS，在指令中通过引用传递对象

Question

我想通过编写指令来构建自定义复选框。

App.directive('preferredCheckBox', function() {
return {
restrict: 'E',
require: '?ngModel',
scope: {
    ngModel: '='
},
link: function(scope, elem,attrs){
    elem.bind('click', function() {
        scope.ngModel = !scope.ngModel;

        //alert("clicked");
    })
},

template: "<div ng-if='ngModel'> <span class='ion-ios-star text-red' style='font-size:2em'></span></div> " +
          "<div ng-if='!ngModel'> <span class='ion-ios-star-outline text-red' style='font-size:2em'></span></div>"
 }

});

这就是我如何调用指令

<preferred-check-box ng-model="item.isChecked"></preferred-check-box>

该指令适用于显示目的。 但是如果我点击复选框，它就不会改变“item.isChecked”的值

在我看来，在指令中：

 scope: {
        ngModel: '='
 },
link: function(scope, elem,attrs){
    elem.bind('click', function() {
        scope.ngModel = !scope.ngModel;

        //alert("clicked");
    })
},

它只是将另一个“item.isChecked”值克隆到自己的本地范围内，在触发click功能期间，它不会更改原始的“item.isChecked”。

我该如何处理？我想通过引用传递ng-model。

以下是链接：http://jsfiddle.net/tanch/rd0b1n4b/7/ 当我单击“已选中”文本时，它应该更改为“未选中”，反之亦然。

Answer 1

参见工作示例：http://jsfiddle.net/kevalbhatt18/rd0b1n4b/11/ 的 的

的

link: function(scope, elem,attrs,ngModel){
        elem.bind('click', function() {
              ngModel.$setViewValue(!scope.ngModel);
              ngModel.$render();
            alert("clicked");
        })
    }

的

Answer 2

只需在警报之前的链接功能中添加scope.$apply();即可启动摘要循环。