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

时间:2016-04-18 21:12:52

标签: angularjs angularjs-directive angularjs-watch

所以我有SPA申请表。

Here on plunker我不会粘贴所有代码,因为它太多)你可以看到它的部分重新创建(结构和层次结构是相同的)。

问题从何处开始... 通过设计文档,在其中一个页面上,我们有一个指向策略文档的链接和一个供客户检查的复选框,他确实阅读了它。

按设计:

  1. 复选框始终处于启用状态,因此客户端始终可以尝试检查
  2. 客户端打开策略文档后(单击链接),当客户端点击它时,应该选中复选框
  3. 如果客户端尚未打开(单击)策略文档链接并尝试选中该复选框,则在释放鼠标时返回不进行检查,并显示相关的错误消息
  4. 更新:

    感谢 Rafaeelloo 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;
        } 
      };
    }]);
    

    问题/问题/已打开的问题: Callback在视图控制器的ngModel发生更改之前被调用。因此,如果我在false内将其更改为callback,则不会真正计量,因为callback之后directive {我知道}仍然会绑定{{1}}它的新价值。

    这有治疗方法吗?

1 个答案:

答案 0 :(得分:1)

根据您尝试做的事情,您可以像这里一样(here) 或者您可以编写具有确定有效性功能的验证器(here is example of writing your own validator),然后您的表单和复选框将invalid更好,而不是禁止用户选中复选框