Question

我正在尝试$watch来自控制器的对象。但它不起作用。这是我的控制器代码：

angular.module('myapp',[]).controller('myController', function(){

var vm = this;

vm.name = "myname"

})

在directive：

    angular.module('myapp',[]).directive('myDirective',function(){
    return{
    link:function(scope, element, attrs){
        scope.$watch('vm.name', function(nv,ov){
         console.log(nv) //not working
    }
    }
    }
})

这里缺少什么？任何人帮助我？

如果我不对，请帮我在这里纠正我

Live URL

Answer 1

我更新了我的代码：它适用于我

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  var vm = this;

  vm.name = "no name";

  vm.update = function(){

    vm.name = "new Name";

  }

});

app.directive('myDirective', function(){

  return{

    link: function(scope, element, attrs){

     scope.$watch('Ctrl.name', function(nV, oV){

       console.log( nV );

     })

    }

  }

})

Answer 2

您需要指定在指令中使用哪个控制器

angular.module('myapp',[]).directive('myDirective',function(){
    return {
        controller: myController,
        controllerAs: 'vm', // this will let you use vm.name in any bindings
        link:function(scope, element, attrs){
            scope.$watch('vm.name', function(nv,ov){
                console.log(nv) //not working
            }
        }
    };
})

function myController(){

    var vm = this;

    vm.name = "myname"
});

<强> 修改

鉴于您的Plunker，此解决方案无法满足您的需求

请检查此Plunker

Answer 3

当控制器和视图都遵循相同的“控制器”时，

“vm。*”将起作用。您在指令中使用相同的控制器范围。您需要使用Controller作为别名来监视。

ng-controller="MainCtrl as Ctrl"

scope.$watch('Ctrl.name', function(nV, oV){
    console.log( nV );
})

请参阅此Plunker。

Ben Nadel在此写了一篇不错的article。

Angualrjs - `$ watch`不适用于`this`声明的控制器对象更改

3 个答案: