我想检查自定义指令中值的变化。
为此,我使用 $parsers unshift-function 添加我自己的函数
但是,我自己的函数没有被调用!
这是我的观点:
<div ng-controller="MyCtrl">
<form novalidate name="myForm">
Number: <even-number name="awesomeField" ng-model="val"></even-number>
</form>
</div>
这是我的 javasript 代码:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.val = "42";
$scope.$watch('val', function() {
console.log("Controller: "+$scope.val);
});
}
myApp.directive('evenNumber', function(){
var tmplt = ''+
'<div class="input-group">'+
'<input class="form-control" name="inputDate" type="text" data-ng-model="ngModel"/>'+
'<span class="input-group-btn">'+
'<button class="btn btn-default">Default</button>'+
'</span>'+
'</div>';
return {
restrict: 'E',
require:'ngModel',
replace: true,
template: tmplt,
scope: {
ngModel: "="
},
link: function(scope, elem, attrs, ctrl){
ctrl.$parsers.unshift(checkValue);
function checkValue(viewValue){
console.log("halllllo");
return viewValue;
}
} // end link
}; // end return
});
这里有什么问题?
这里是 jsFiddle
最佳答案
将您的指令写成属性指令,用于 <input />
ngModel 已经知道如何处理的元素。像这样包装输入不适用于 ngModel。您将需要两个指令来实现您的需要。一个捆绑输入和按钮(事件编号),第二个附加到输入本身以使用 $parsers model --> view
执行任何转换。 & $格式化程序view --> model
.
更新这是一个工作示例:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.val = "42";
$scope.$watch('val', function() {
console.log("Controller: "+$scope.val);
});
}
myApp
.directive('evenNumberConverter', function(){
return {
restrict: 'A',
require:'ngModel',
link: function(scope, elem, attrs, ctrl){
ctrl.$parsers.unshift(checkValue);
function checkValue(viewValue){
console.log("halllllo");
return viewValue;
}
} // end link
}; // end return
})
.directive('evenNumber', function(){
var tmplt = ''+
'<div class="input-group">'+
'<input class="form-control" name="inputDate" type="text" even-number-converter data-ng-model="value"/>'+
'<span class="input-group-btn">'+
'<button class="btn btn-default" data-ng-click="setDefault()">Default</button>'+
'</span>'+
'</div>';
return {
restrict: 'E',
replace: true,
template: tmplt,
scope: {
value: "="
},
link: function(scope, elem, attrs, ctrl){
scope.setDefault = function() {
scope.value = 0;
};
} // end link
}; // end return
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form novalidate name="myForm">
Number ({{val}}): <even-number name="awesomeField" value="val"></even-number>
</form>
</div>
注意事项:
问题是您的指令不使用任何 ngModelController
将值发送到 View 组件并将其读回模型的方法。它是一个简单的“包装器”指令,因此作用域上的 ngModel 也可以以任何其他方式命名。
这是因为 ngModel 指令对您的“偶数”元素一无所知。为此,您必须覆盖并使用 $render()
方法来呈现值,当从 UI 读取新值时使用 $setViewValue()
.只有这样 $parsers 和 $formatters 才会被触发,否则 ngModel 范围变量的行为与任何其他变量一样。
关于javascript - $parsers-array 中的函数未在自定义指令中调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27485658/