Angular watch 不适用于 controllerAs 语法
Angular watch doesn't work with controllerAs syntax
观看响应有问题。
我有一个 SettingsCtrl 作为设置,这是我的观点:
<input type="text" class="form-control" ng-model="settings.test.one" />
<input type="text" class="form-control" ng-model="settings.test.second" />
这是我的控制器:
app.controller('SettingsCtrl', function ($scope, settingsFactory, Test) {
var vm = this;
settingsFactory.test().then(function(response){
vm.test = response;
})
///// OR
vm.test = Test; // this is from ui-router resolve
$scope.$watch(angular.bind('vm', function () {
return vm.test;
}), function (newV, oldV) {
console.log(newV, oldV);
});
$scope.$watch(function watch(scope){
return vm.test;
}), function handle(newV, oldV) {
console.log(newV, oldV);
});
$scope.$watch('vm', function (newVal, oldVal) {
console.log('newVal, oldVal', newVal, oldVal);
});
});
我一直在搜索并找到了不同的解决方案,但没有一个有效。
**** 这只是第一次观察,当控制器加载时我看到了我的控制台日志,但是当我尝试进行更改时观察者什么都不做。
我做错了什么?
请尝试在 watcher 中将 vm 变量调用为 controller.vmVariable。 controller是你的控制器名然后是你在vm中赋值的变量。
$scope.$watch('controller.vmVariable', function (newVal, oldVal) {
console.log('newVal, oldVal', newVal, oldVal);
});
试试下面的手表代码。
$scope.$watch(function(){
return ctrl.test;
},function(newVal,oldVal){
console.log(newVal,oldVal);
},true)
这是工作fiddle
你需要深入观察对象。
这篇link$watch an object将帮助您理解这一点。
如果我没记错的话,您的 $watch 会在第一次加载控制器时触发,但不会在您更改对象中的某些内容时触发。如果那是真的,那么试试这个:
$scope.$watch('vm', function (newVal, oldVal) {
console.log('newVal, oldVal', newVal, oldVal);
}, true);
默认情况下,$watch 函数监视引用,因此如果您只更改监视对象的 属性,它就不会被触发。通过在末尾添加true
,开始深度观察,每改变一个属性的对象,就会命中
AngularJS 仍然按预期工作:
angular
.module('app', [])
.controller('SettingsCtrl', function($scope) {
var vm = this
vm.test = ''
$scope.$watch(function watch(scope) {
return vm.test;
},
function handle(newV, oldV) {
if (newV && newV.name && newV.name !== oldV.name) {
vm.test.watchedName = newV.name.toUpperCase()
}
}, true);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
<div ng-controller='SettingsCtrl as settings'>
<input type='text' ng-model='settings.test.name' />
<pre><code>
{{ settings.test.watchedName }}
</code></pre>
</div>
</div>
在参考 github post (https://github.com/johnpapa/angular-styleguide/issues/428) and (http://jsbin.com/levewagufo/edit?html,js,console,output) 之后对我有用的是将控制器从 vm = this 重命名为(在你的情况下)settings = this in开始编写控制器。这确保引用与视图中的 "controller as" 声明相匹配。希望这有帮助
在视图中:
ng-controller="AddDetailController as addDetailsCtrl"
在控制器 Js 文件中:
$scope.$watch('addDetailsCtrl.currentPage', function (current, original) {
console.log(current + ":" + original); });
观看响应有问题。
我有一个 SettingsCtrl 作为设置,这是我的观点:
<input type="text" class="form-control" ng-model="settings.test.one" />
<input type="text" class="form-control" ng-model="settings.test.second" />
这是我的控制器:
app.controller('SettingsCtrl', function ($scope, settingsFactory, Test) {
var vm = this;
settingsFactory.test().then(function(response){
vm.test = response;
})
///// OR
vm.test = Test; // this is from ui-router resolve
$scope.$watch(angular.bind('vm', function () {
return vm.test;
}), function (newV, oldV) {
console.log(newV, oldV);
});
$scope.$watch(function watch(scope){
return vm.test;
}), function handle(newV, oldV) {
console.log(newV, oldV);
});
$scope.$watch('vm', function (newVal, oldVal) {
console.log('newVal, oldVal', newVal, oldVal);
});
});
我一直在搜索并找到了不同的解决方案,但没有一个有效。
**** 这只是第一次观察,当控制器加载时我看到了我的控制台日志,但是当我尝试进行更改时观察者什么都不做。
我做错了什么?
请尝试在 watcher 中将 vm 变量调用为 controller.vmVariable。 controller是你的控制器名然后是你在vm中赋值的变量。
$scope.$watch('controller.vmVariable', function (newVal, oldVal) {
console.log('newVal, oldVal', newVal, oldVal);
});
试试下面的手表代码。
$scope.$watch(function(){
return ctrl.test;
},function(newVal,oldVal){
console.log(newVal,oldVal);
},true)
这是工作fiddle
你需要深入观察对象。
这篇link$watch an object将帮助您理解这一点。
如果我没记错的话,您的 $watch 会在第一次加载控制器时触发,但不会在您更改对象中的某些内容时触发。如果那是真的,那么试试这个:
$scope.$watch('vm', function (newVal, oldVal) {
console.log('newVal, oldVal', newVal, oldVal);
}, true);
默认情况下,$watch 函数监视引用,因此如果您只更改监视对象的 属性,它就不会被触发。通过在末尾添加true
,开始深度观察,每改变一个属性的对象,就会命中
AngularJS 仍然按预期工作:
angular
.module('app', [])
.controller('SettingsCtrl', function($scope) {
var vm = this
vm.test = ''
$scope.$watch(function watch(scope) {
return vm.test;
},
function handle(newV, oldV) {
if (newV && newV.name && newV.name !== oldV.name) {
vm.test.watchedName = newV.name.toUpperCase()
}
}, true);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
<div ng-controller='SettingsCtrl as settings'>
<input type='text' ng-model='settings.test.name' />
<pre><code>
{{ settings.test.watchedName }}
</code></pre>
</div>
</div>
在参考 github post (https://github.com/johnpapa/angular-styleguide/issues/428) and (http://jsbin.com/levewagufo/edit?html,js,console,output) 之后对我有用的是将控制器从 vm = this 重命名为(在你的情况下)settings = this in开始编写控制器。这确保引用与视图中的 "controller as" 声明相匹配。希望这有帮助
在视图中:
ng-controller="AddDetailController as addDetailsCtrl"
在控制器 Js 文件中:
$scope.$watch('addDetailsCtrl.currentPage', function (current, original) {
console.log(current + ":" + original); });