本文介绍了Angularjs:“控制器作为语法”和$腕表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何使用控制器语法当属性更改订阅?

 控制器('TestCtrl',函数($范围){
        this.name ='最大';
        this.changeName =功能(){
            this.name =新的日期();
       }
       //不工作
       $范围。$表(名,功能(价值){
            的console.log(值)
       });
});
< D​​IV NG控制器=TestCtrl为测试>
        <输入类型=文本NG模型=test.name/>
        <一个NG点击=test.changeName()的href =#>变更名称和LT; / A>
< / DIV>


解决方案

只需绑定的有关情况。

  $范围。$腕表(angular.bind(这一点,函数(){
  返回this.name;
}),功能(的newval){
  的console.log('更名为'+的newval);
});

例如:

更新:

波格丹Gersak的回答实际上是样相当于两个答案尝试结合这个通过正确的上下文。然而,我发现他的回答更清洁。

有了这样说,首先,你要了解的。

更新2:

对于那些谁使用ES6,使用箭头功能你用正确的情况下开箱即用的功能。

  $ $范围手表(()=方式> this.name,功能(的newval){
  的console.log('更名为'+的newval);
});

How to subscribe on property change when using "controller as syntax"?

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>
解决方案

Just bind the relevant context.

$scope.$watch(angular.bind(this, function () {
  return this.name;
}), function (newVal) {
  console.log('Name changed to ' + newVal);
});

Example: http://jsbin.com/yinadoce/1/edit

UPDATE:

Bogdan Gersak's answer is actually kind of equivalent, both answers try binding this with the right context. However, I found his answer cleaner.

Having that said, first and foremost, you have to understand the underlying idea behind it.

UPDATE 2:

For those who use ES6, by using arrow function you get a function with the right context OOTB.

$scope.$watch(() => this.name, function (newVal) {
  console.log('Name changed to ' + newVal);
});

Example

这篇关于Angularjs:“控制器作为语法”和$腕表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-29 15:59
查看更多