所以我有SPA申请表。
Here on plunker(我不会粘贴所有代码,因为它太多)你可以看到它的部分重新创建(结构和层次结构是相同的)。
问题从何处开始... 通过设计文档,在其中一个页面上,我们有一个指向策略文档的链接和一个供客户检查的复选框,他确实阅读了它。
按设计:
感谢 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}}它的新价值。
这有治疗方法吗?
答案 0 :(得分:1)
根据您尝试做的事情,您可以像这里一样(here)
或者您可以编写具有确定有效性功能的验证器(here is example of writing your own validator),然后您的表单和复选框将invalid
更好,而不是禁止用户选中复选框