使用controller as
语法时如何订阅属性更改?
controller('TestCtrl', function ($scope) {
this.name = 'Max';
this.changeName = function () {
this.name = new Date();
}
// not working
$scope.$watch("name",function(value){
console.log(value)
});
});
<div ng-controller="TestCtrl as test">
<input type="text" ng-model="test.name" />
<a ng-click="test.changeName()" href="#">Change Name</a>
</div>
只需绑定相关上下文即可。
$scope.$watch(angular.bind(this, function () {
return this.name;
}), function (newVal) {
console.log('Name changed to ' + newVal);
});
示例:http://jsbin.com/yinadoce/1/edit
更新:
Bogdan Gersak的答案实际上是等效的,两个答案都尝试this
在正确的上下文中进行绑定。但是,我发现他的答案更干净。
话虽如此,首先,您必须了解其背后的基本思想。
更新2:
对于使用ES6的用户,通过使用它们arrow function
可以获得具有正确上下文OOTB的功能。
$scope.$watch(() => this.name, function (newVal) {
console.log('Name changed to ' + newVal);
});
我通常这样做:
controller('TestCtrl', function ($scope) {
var self = this;
this.name = 'Max';
this.changeName = function () {
this.name = new Date();
}
$scope.$watch(function () {
return self.name;
},function(value){
console.log(value)
});
});
您可以使用:
$scope.$watch("test.name",function(value){
console.log(value)
});
这使JSFiddle与您的示例一起工作。
如在另一个答案中所述,类似于使用“ TestCtrl作为测试”中的“测试”,您可以为范围分配“自我”:
controller('TestCtrl', function($scope){
var self = this;
$scope.self = self;
self.name = 'max';
self.changeName = function(){
self.name = new Date();
}
$scope.$watch("self.name",function(value){
console.log(value)
});
})
这样,您就不必绑定到DOM中指定的名称(“ TestCtrl as test”),并且还避免了将.bind(this)绑定到函数的需要。
...用于指定的原始html:
<div ng-controller="TestCtrl as test">
<input type="text" ng-model="test.name" />
<a ng-click="test.changeName()" href="#">Change Name</a>
</div>
AngularJs 1.5支持ControllerAs结构的默认$ ctrl。
$scope.$watch("$ctrl.name", (value) => {
console.log(value)
});
您实际上可以将函数作为$ watch()的第一个参数传递:
app.controller('TestCtrl', function ($scope) {
this.name = 'Max';
// hmmm, a function
$scope.$watch(function () {}, function (value){ console.log(value) });
});
这意味着我们可以返回我们的this.name参考:
app.controller('TestCtrl', function ($scope) {
this.name = 'Max';
// boom
$scope.$watch(angular.bind(this, function () {
return this.name; // `this` IS the `this` above!!
}), function (value) {
console.log(value);
});
});
阅读有关controllerA主题的有趣帖子https://toddmotto.com/digging-into-angulars-controller-as-syntax/
您可以使用$ onChanges角度组件生命周期。
请参阅以下文档:
基于组件的应用程序部分
下的https://docs.angularjs.org/guide/component
用ES6语法编写$ watch并不像我期望的那么容易。您可以执行以下操作:
// Assuming
// controllerAs: "ctrl"
// or
// ng-controller="MyCtrl as ctrl"
export class MyCtrl {
constructor ($scope) {
'ngInject';
this.foo = 10;
// Option 1
$scope.$watch('ctrl.foo', this.watchChanges());
// Option 2
$scope.$watch(() => this.foo, this.watchChanges());
}
watchChanges() {
return (newValue, oldValue) => {
console.log('new', newValue);
}
}
}
注意:当View和Controller在路由中或通过指令定义对象耦合时,这将不起作用。仅当HTML中包含“ SomeCtrl as SomeCtrl”时,下面显示的内容才有效。正如Mark V.在下面的评论中指出的那样,正如他说的那样,最好像Bogdan那样做。
我使用:var vm = this;
在控制器的开头,将“ this”一词排除在外。然后vm.name = 'Max';
在手表里return vm.name
。我使用“ vm”,就像@Bogdan使用“ self”一样。这个变量是“ vm”还是“ self”,因为单词“ this”在函数内部具有不同的上下文。(因此,返回this.name无效),是的,您需要在漂亮的“ controller as”解决方案中注入$ scope才能达到$ watch。参见John Papa的样式指南:https://github.com/johnpapa/angularjs-styleguide#controllers
function SomeController($scope, $log) {
var vm = this;
vm.name = 'Max';
$scope.$watch('vm.name', function(current, original) {
$log.info('vm.name was %s', original);
$log.info('vm.name is now %s', current);
});
}
这是在没有$ scope(和$ watch!)的情况下如何执行此操作的前5个错误-滥用手表
如果使用“ controller as”语法,则最好避免使用$ scope。
这是我在JSFiddle中的代码。(我正在使用服务来保存名称,否则ES5 Object.defineProperty的set和get方法会导致无限调用。
var app = angular.module('my-module', []);
app.factory('testService', function() {
var name = 'Max';
var getName = function() {
return name;
}
var setName = function(val) {
name = val;
}
return {getName:getName, setName:setName};
});
app.controller('TestCtrl', function (testService) {
var vm = this;
vm.changeName = function () {
vm.name = new Date();
}
Object.defineProperty(this, "name", {
enumerable: true,
configurable: false,
get: function() {
return testService.getName();
},
set: function (val) {
testService.setName(val);
console.log(vm.name);
}
});
});
文章标签:angularjs , angularjs-scope , javascript , ng-controller
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!