javascript 如何在自定义指令中使用 ngChange
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24286380/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use ngChange in custom directive
提问by jcubic
I want to create directive for toggle button, I have code that I want to put into directive:
我想为切换按钮创建指令，我有要放入指令的代码：
<div class="toggle-button" ng-class="{true: toggleTrue === true, false: toggleTrue === false}">
<button class="true" ng-click="toggleTrue = true">Y</button><button class="false" ng-click="toggleTrue = false">N</button>
</div>
(I only work on style change, that's why I have only class change)
（我只致力于风格改变，这就是为什么我只有班级改变）
I want to have something like:
我想要一些类似的东西：
<toogle ng-change="SomeFunction()" ng-model="someValue" />
how can I work with ng-change in my directive? Should I just parse attr or use scope attribute or is there a code like with ngModel that need to be use together with ngChange.
如何在我的指令中使用 ng-change？我应该只解析 attr 还是使用 scope 属性，或者是否有像 ngModel 这样的代码需要与 ngChange 一起使用。
回答by jcubic
By try and error I found code that work with ngModel and ngChange:
通过尝试和错误，我发现了适用于 ngModel 和 ngChange 的代码：
return {
restrict: 'E',
require: 'ngModel',
scope: {},
template: '<div class="toggle-button" ng-class="{true: toggleValue === true, false: toggleValue === false}">'+
'<button class="true" ng-click="toggle(true)">Y</button>'+
'<button class="false" ng-click="toggle(false)">N</button>'+
'</div>',
link: function(scope, element, attrs, ngModel) {
ngModel.$viewChangeListeners.push(function() {
scope.$eval(attrs.ngChange);
});
ngModel.$render = function() {
scope.toggleValue = ngModel.$modelValue;
};
scope.toggle = function(toggle) {
scope.toggleValue = toggle;
ngModel.$setViewValue(toggle);
};
}
};
For unknow reason scope: truedon't work (if I have $scope.toggle variable used as model, it try to execute that boolean instead of a function)
由于未知原因scope: true不起作用（如果我将 $scope.toggle 变量用作模型，它会尝试执行该布尔值而不是函数）
回答by gorpacrate
Try this way:
试试这个方法：
controller:
控制器：
$scope.someFunction = function(){...};
$scope.someValue = false;
view:
看法：
<toggle change="someFunction" value="someValue"/>
directive (in the case when someValue is always boolean true/false):
指令（在 someValue 总是布尔值真/假的情况下）：
app.directive('toggle', function(){
return{
restrict: 'E',
replace: true,
template: ''+
'<div class="toggle-button" ng-class="toggleValue">'+
'<button ng-class="toggleValue" ng-click="change()">{{toggleValue&&\'Y\'||\'N\'}}</button>'+
'</div>',
scope: {
toggleValue: '=value',
toggleChange: '=change'
},
link: function(scope){
scope.change = function(){
scope.toggleValue = !scope.toggleValue;
scope.toggleChange();
}
}
};
})
