【发布时间】:2016-08-10 19:19:06
【问题描述】:
所以我有我的 SPA 应用程序。
Here on plunker(代码太多我就不贴了)你可以看到它的部分再造(结构和层次是一样的 em>)。
问题从哪里开始... 根据设计文档,在其中一个页面上,我们有一个指向政策文档的链接和一个供客户检查的复选框,他确实阅读了它。
按设计:
- 复选框始终处于启用状态,因此客户端可以随时尝试检查它
- 客户端打开策略文档后(单击链接),当客户端单击复选框时,复选框应变为选中状态
- 如果客户还没有打开(点击)政策文档链接并尝试选中复选框,则在释放鼠标的那一刻返回未选中,并应显示相关错误消息
更新:
感谢 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 更改之前调用。因此,如果我在callback 内将其更改回false,它并没有真正计量,因为在callback 之后directive(据我所知)仍然将新值绑定到它。
有没有办法解决这个问题?
【问题讨论】:
-
尝试使用 ngModelController 而不是使用 watch()
-
而不是将其放入作用域,尝试:require:'ngModel',然后您可以在链接函数中使用它(作用域、元素、属性、控制器){控制器[0] ...
-
简单,当您需要一个属性时,您可以访问其控制器,在本例中为 ng-model 控制器。但是如果您只是将值暴露给范围,那么您需要应用更改并通知 Angular 该值已更改,因为 ng-model 指令没有监视它,因此不会生效
-
@neoselcev,我不确定,但我认为您的
callback可以简化为ng-change="callbackFunction()"并且它应该可以正常工作,然后不需要在复选框指令上使用 ng-model . -
@neoselcev 如果我理解正确:您需要在模型值更改时执行函数(此处称为
callback)?如果为真,那么最好的解决方案是使用ng-change。如果我理解正确的话,我想告诉你callback函数在这里是多余的。
标签: angularjs angularjs-directive angularjs-watch