blocks|key|4614857|text|我通常这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4614858|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)
+++});
});|code-block|syntax|javascript|4614859|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I usually do this:

<pre><code>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)
 });
});
</code></pre>

blocks|key|4614835|text|您可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4614836|+++$scope.$watch("test.name",function(value){
++++++++console.log(value)
+++});|code-block|syntax|javascript|4614837|这是与您的示例一起工作的JSFiddle。|offset|length|4614838|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/HB7LU/4096/^0|0|0|C|8|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

You can use:

<pre><code> $scope.$watch("test.name",function(value){
 console.log(value)
 });
</code></pre>

This is working <a href="http://jsfiddle.net/HB7LU/4096/">JSFiddle</a> with your example.

blocks|key|4614893|text|类似于使用"TestCtrl+as+test“中的"+test”，如另一个答案中所述，您可以将您的作用域分配给"self“：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4614894|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)
++++++++});
})|code-block|syntax|javascript|4614895|通过这种方式，您不需要绑定到DOM中指定的名称("TestCtrl+as+.bind“)，并且还避免了对函数进行测试(+this+)的需要。|4614896|与指定的原始...for一起使用：|4614897|<div+ng-controller="TestCtrl+as+test">
++++<input+type="text"+ng-model="test.name"+/>
++++<a+ng-click="test.changeName()"+href="#">Change+Name</a>
</div>|4614898|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Similar to using the "test" from "TestCtrl as test", as described in another answer, you can assign "self" your scope:

<pre><code>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)
 });
})
</code></pre>

In this way, you are not tied to the name specified in the DOM ("TestCtrl as test") and you also avoid the need to .bind(this) to a function.

...for use with the original html specified:

<pre><code>&lt;div ng-controller="TestCtrl as test"&gt;
 &lt;input type="text" ng-model="test.name" /&gt;
 &lt;a ng-click="test.changeName()" href="#"&gt;Change Name&lt;/a&gt;
&lt;/div&gt;
</code></pre>

blocks|key|108748|text|AngularJs1.5支持ControllerAs结构的默认$ctrl。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|108749|$scope.$watch("$ctrl.name",+(value)+=>+{
++++console.log(value)
});|code-block|syntax|javascript|108750|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

AngularJs 1.5 supports the default $ctrl for the ControllerAs structure.

<pre><code>$scope.$watch("$ctrl.name", (value) =&gt; {
 console.log(value)
});
</code></pre>

blocks|key|108785|text|实际上，您可以将一个函数作为$watch()的第一个参数传入：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|108786|+app.controller('TestCtrl',+function+($scope)+{
+this.name+=+'Max';

//+hmmm,+a+function
+$scope.$watch(function+()+{},+function+(value){+console.log(value)+});
+});|code-block|syntax|javascript|108787|这意味着我们可以返回我们的this.name引用：|108788|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);
++++});
});|108789|阅读一篇关于controllerAs主题https://toddmotto.com/digging-into-angulars-controller-as-syntax/的有趣文章|offset|length|108790|entityMap|0|LINK|mutability|MUTABLE|url|https://toddmotto.com/digging-into-angulars-controller-as-syntax/^0|0|0|0|0|K|1T|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

you can actually pass in a function as the first argument of a $watch(): 

<pre><code> app.controller('TestCtrl', function ($scope) {
 this.name = 'Max';

// hmmm, a function
 $scope.$watch(function () {}, function (value){ console.log(value) });
 });
</code></pre>

Which means we can return our this.name reference:

<pre><code>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);
 });
});
</code></pre>

Read an interesting post about controllerAs topic <a href="https://toddmotto.com/digging-into-angulars-controller-as-syntax/" rel="nofollow">https://toddmotto.com/digging-into-angulars-controller-as-syntax/</a>

blocks|key|108713|text|用ES6语法编写$watch并不像我预想的那么简单。下面是你可以做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|108714|//+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);
++++}
++}
}|code-block|syntax|javascript|108715|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Writing a $watch in ES6 syntax wasn't as easy as I expected. Here's what you can do:

<pre><code>// 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(() =&gt; this.foo, this.watchChanges());
 }

 watchChanges() {
 return (newValue, oldValue) =&gt; {
 console.log('new', newValue);
 }
 }
}
</code></pre>

blocks|key|4614932|text|下面是在没有$scope+(和$watch!)+Top+5+Mistakes+-+Abusing+watch的情况下如何做到这一点|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4614933|如果你使用"controller+as“语法，最好避免使用$scope。|4614934|下面是我用JSFiddle编写的代码。(我使用服务来保存名称，否则ES5对象的set和get方法会导致无限的调用。|4614935|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);
++++++++}
++++});+
});|code-block|syntax|javascript|4614936|entityMap|0|LINK|mutability|MUTABLE|url|http://csharperimage.jeremylikness.com/2014/11/the-top-5-mistakes-angularjs-developers_28.html|1|https://jsfiddle.net/bnjasim/g6L3eodz/7/^0|O|U|0|0|0|5|8|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

Here is how you do this without $scope (and $watch!) <a href="http://csharperimage.jeremylikness.com/2014/11/the-top-5-mistakes-angularjs-developers_28.html" rel="nofollow noreferrer">Top 5 Mistakes - Abusing watch</a>

If you are using "controller as" syntax, it's better and cleaner to avoid using $scope. 

Here is my code in <a href="https://jsfiddle.net/bnjasim/g6L3eodz/7/" rel="nofollow noreferrer">JSFiddle</a>. (I am using a service to hold the name, otherwise the ES5 Object.defineProperty's set and get methods cause infinite calls. 

<pre><code>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);
 }
 }); 
});
</code></pre>

How to subscribe on property change when using <code>controller as</code> syntax?

<pre class="lang-js prettyprint-override"><code>controller('TestCtrl', function ($scope) {
 this.name = 'Max';
 this.changeName = function () {
 this.name = new Date();
 }
 // not working 
 $scope.$watch("name",function(value){
 console.log(value)
 });
});
</code></pre>

<pre class="lang-html prettyprint-override"><code>&lt;div ng-controller="TestCtrl as test"&gt;
 &lt;input type="text" ng-model="test.name" /&gt;
 &lt;a ng-click="test.changeName()" href="#"&gt;Change Name&lt;/a&gt;
&lt;/div&gt; 
</code></pre>

Angularjs: 'controller as syntax' and $watch

如何在使用controller as语法时订阅属性更改？controller('TestCtrl', function ($scope) {  this.name = 'Max';  this.changeName = function () {    this.name = new Date();  }  // not working         $scope.$watch("name",f

问Angularjs：“控制器作为语法”和$watch
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angularjs：“控制器作为语法”和$watchEN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angularjs：“控制器作为语法”和$watch
EN