更改分配给该指令回调的指令的 ngModel

Question

所以我有我的 SPA 应用程序。

Here on plunker（我不会粘贴所有代码，因为它太多了）你可以看到它的部分娱乐（结构和层级相同).

问题从哪里开始... 根据设计文档，在其中一页上，我们有一个 link 到政策文档和一个供客户检查的复选框，他确实阅读了它。

设计：

复选框始终处于启用状态，因此客户端始终可以尝试选中它
客户端打开策略文档后（点击 link），当客户端点击它时，复选框应该会被选中
如果客户尚未打开（单击）政策文档 link 并尝试选中该复选框，则在他释放鼠标时 return 不会选中该复选框，并且应显示相关错误消息

更新：

感谢 Rafaeello 和 Kobi Cohen 我可以把代码简化很多，摆脱手表和无用的东西...

现在这就是我所拥有的...

这里是指令控制器：

app.directive('checkBox', [function() {
  var directive = {
    scope: {}, 
    restrict: 'E', 
    controller: function() {},
    controllerAs: 'checkBoxCtrl',
    bindToController: {
      ngModel: '=',
      callback: '&callback',
      text: '@' 
    },
    templateUrl: 'check-box.directive.view.html',
    link: function() {},
    require: 'ngModel'
  };
  return directive;
}]);

和指令html:

<div class="checkboxContainer">
    <label class="btn btn-checkbox" ng-class="{'active': checkBoxCtrl.ngModel}" 
                                    ng-click="checkBoxCtrl.ngModel = !checkBoxCtrl.ngModel; checkBoxCtrl.callback()">
        <span class="checkboxPic"></span> 
        <span class="checkboxText">{{checkBoxCtrl.text}}</span> 
    </label>
</div>

这是视图 html:

<check-box text="check me"  ng-model="viewCtrl.checkBoxResult" 
                            callback="viewCtrl.callback()"></check-box>
<br/>
<a ng-click="viewCtrl.openGoogleClicked = true" href="//www.google.com" target="_blank">Open Google</a>
 
<hr> 

<h3>Status</h3>  
check box result: {{viewCtrl.checkBoxResult}}    
<br/>
google opened: {{viewCtrl.openGoogleClicked}}
<br/>
callback function called: {{viewCtrl.callbackCalled}}

这是视图控制器：

angular.module('app').controller('viewController', ['$scope', function($scope) {
  this.checkBoxResult;
  this.openGoogleClicked;
  this.callbackCalled;
 
  this.callback = function callback() {  
    this.callbackCalled = true;
    if (this.checkBoxResult && angular.isUndefined(this.openGoogleClicked)) {
      this.checkBoxResult = false;
    } 
  };
}]);

question/problem/opened 问题： Callback 在视图控制器的 ngModel 被改变之前被调用。因此，如果我在 callback 内将其更改回 false 或不更改，它并没有真正计量，因为在 callback 之后 directive （据我了解）仍然绑定它的新价值。

有治愈方法吗？

Answer 1

根据你想做的事情，你可以像这里那样做 (here) 或者你可以编写具有确定有效性功能的验证器 (here is example of writing your own validator) 然后你的表单和复选框将有 invalid 在我看来比不允许用户检查复选框更好

更改分配给该指令回调的指令的 ngModel

Change ngModel that was assigned to a directive on a callback from that directive

angularjs

angularjs-directive

angularjs-watch

更新：