Angularjs : '구문으로서의 컨트롤러'와 $ watch

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 as test"의 "test"를 사용하는 것과 유사하게 "self"를 범위에 할당 할 수 있습니다.

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);
    });
});

controllerAs 주제 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에 "SomeController as SomeCtrl"이있는 경우에만 작동합니다. Mark V.가 아래 의견에서 지적한 것처럼 Bogdan 이하는 것처럼하는 것이 낫습니다.

나는 var vm = this;컨트롤러의 시작 부분에 "this"라는 단어를 내 방식에서 꺼내기 위해 사용합니다. 그리고 vm.name = 'Max';시계에서 나는 return vm.name. @Bogdan이 "self"를 사용하는 것처럼 "vm"을 사용합니다. 이 변수는 "vm"또는 "self"가 필요하기 때문에 "this"라는 단어는 함수 내부에서 다른 컨텍스트를 갖기 때문에 필요합니다. (그래서 this.name을 반환해도 작동하지 않습니다.) 예, $ watch에 도달하려면 아름다운 "컨트롤러"솔루션에 $ scope를 주입해야합니다. 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의 설정 및 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);
        }
    }); 
});