Angular ngChange处理程序获取旧值 [英] Angular ngChange handler gets old value
本文介绍了Angular ngChange处理程序获取旧值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建angular指令，该指令将HTML输入与引导程序表单组一起包装.我使用ng-change事件侦听更改，但在ng-change处理程序中得到了旧值，为此我创建了相同的指令，一个使用ng-keyup，另一个使用ng-change事件来侦听更改./p>
var app = angular.module('app', []);
app.controller('home', function() {
this.textKeyUp = 'KeyUp';
this.textNgChange = 'NgChange';
this.textKeyUpChanged = function() {
console.log('Changed on KeyUp:', this.textKeyUp);
};
this.textNgChangeChanged = function() {
console.log('Changed on NgChange:', this.textNgChange);
};
});
app.directive('apTextKeyUp', function() {
return {
controller: function() {},
controllerAs: 'ctrl',
bindToController: {
model: '=',
change: '&'
},
scope: {},
template: '<input ng-model="ctrl.model" ng-keyup="ctrl.change()" />'
};
});
app.directive('apTextNgChange', function() {
return {
controller: function() {},
controllerAs: 'ctrl',
bindToController: {
model: '=',
change: '&'
},
scope: {},
template: '<input ng-model="ctrl.model" ng-change="ctrl.change()" />'
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-controller="home as ctrl">
<h3>KeyUp</h3>
<ap-text-key-up model="ctrl.textKeyUp" change="ctrl.textKeyUpChanged()"></ap-text-key-up>
<h3>NgChange</h3>
<ap-text-ng-change model="ctrl.textNgChange" change="ctrl.textNgChangeChanged()"></ap-text-ng-change>
</body>
</html>
两个指令都更新模型值，但是内部的textNgChangeChanged处理程序值尚未更新.
这是设计使然吗?我该如何解决这个问题?
解决方案
当使用基本类型作为ng-model值时，当值更改时将调用ng-change.由于这是基本类型，因此该值尚未传播到homeCtroller.如果您将指令传递给引用对象，则事情将按预期进行.
通过引用传递文字
var app = angular.module('app', []);
app.controller('home', function() {
this.text = {val: 'ABC'};
this.textChanged = function() {
console.log('Changed:', this.text.val);
};
});
app.directive('apText', function() {
return {
controller: function() {
var vm = this;
vm.onChange = function(){
console.log(vm.model);
vm.change();
};
},
controllerAs: 'ctrl',
bindToController: {
model: '=',
change: '&'
},
scope: true,
template: '<input ng-model="ctrl.model.val" ng-change="ctrl.onChange()" />'
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.5.0-rc.0/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="home as ctrl">
<ap-text model="ctrl.text" change="ctrl.textChanged()"></ap-text>
</body>
</html>
通过val传递文本
var app = angular.module('app', []);
app.controller('home', function() {
this.text = 'ABC';
this.textChanged = function() {
console.log('Changed:', this.text);
};
});
app.directive('apText', function() {
return {
controller: function() {
var vm = this;
vm.onChange = function(){
console.log(vm.model);
vm.change();
};
},
controllerAs: 'ctrl',
bindToController: {
model: '=',
change: '&'
},
scope: true,
template: '<input ng-model="ctrl.model" ng-change="ctrl.onChange()" />'
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.5.0-rc.0/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="home as ctrl">
<ap-text model="ctrl.text" change="ctrl.textChanged()"></ap-text>
</body>
</html>
I am creating angular directive, which wraps html input with bootstrap form group. I use ng-change event to listen to changes, but I get old value inside ng-change handler.To show this, I created to identical directives, one uses ng-keyup and another uses ng-change event to listen to changes.
var app = angular.module('app', []);
app.controller('home', function() {
this.textKeyUp = 'KeyUp';
this.textNgChange = 'NgChange';
this.textKeyUpChanged = function() {
console.log('Changed on KeyUp:', this.textKeyUp);
};
this.textNgChangeChanged = function() {
console.log('Changed on NgChange:', this.textNgChange);
};
});
app.directive('apTextKeyUp', function() {
return {
controller: function() {},
controllerAs: 'ctrl',
bindToController: {
model: '=',
change: '&'
},
scope: {},
template: '<input ng-model="ctrl.model" ng-keyup="ctrl.change()" />'
};
});
app.directive('apTextNgChange', function() {
return {
controller: function() {},
controllerAs: 'ctrl',
bindToController: {
model: '=',
change: '&'
},
scope: {},
template: '<input ng-model="ctrl.model" ng-change="ctrl.change()" />'
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-controller="home as ctrl">
<h3>KeyUp</h3>
<ap-text-key-up model="ctrl.textKeyUp" change="ctrl.textKeyUpChanged()"></ap-text-key-up>
<h3>NgChange</h3>
<ap-text-ng-change model="ctrl.textNgChange" change="ctrl.textNgChangeChanged()"></ap-text-ng-change>
</body>
</html>
Both directives update model value, but inside textNgChangeChanged handler value is not updated yet.
Is this by design? How can I fix this problem?
解决方案
It looks like when using Primative type as the ng-model value, ng-change will be invoke when the value is changed. Since this is a primative type, the value hasn't been propagated to the homeCtroller. If you pass the directive a reference object, things work as expected.
passing text by reference
var app = angular.module('app', []);
app.controller('home', function() {
this.text = {val: 'ABC'};
this.textChanged = function() {
console.log('Changed:', this.text.val);
};
});
app.directive('apText', function() {
return {
controller: function() {
var vm = this;
vm.onChange = function(){
console.log(vm.model);
vm.change();
};
},
controllerAs: 'ctrl',
bindToController: {
model: '=',
change: '&'
},
scope: true,
template: '<input ng-model="ctrl.model.val" ng-change="ctrl.onChange()" />'
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.5.0-rc.0/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="home as ctrl">
<ap-text model="ctrl.text" change="ctrl.textChanged()"></ap-text>
</body>
</html>
passing text by val
var app = angular.module('app', []);
app.controller('home', function() {
this.text = 'ABC';
this.textChanged = function() {
console.log('Changed:', this.text);
};
});
app.directive('apText', function() {
return {
controller: function() {
var vm = this;
vm.onChange = function(){
console.log(vm.model);
vm.change();
};
},
controllerAs: 'ctrl',
bindToController: {
model: '=',
change: '&'
},
scope: true,
template: '<input ng-model="ctrl.model" ng-change="ctrl.onChange()" />'
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.5.0-rc.0/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="home as ctrl">
<ap-text model="ctrl.text" change="ctrl.textChanged()"></ap-text>
</body>
</html>
这篇关于Angular ngChange处理程序获取旧值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
