[javascript] Angularjs : ‘구문으로서의 컨트롤러’와 $ watch

Program / 글쓴이

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
에서 구성 요소 기반 응용 프로그램 섹션