[Javascript] Angularjs: 'वाक्यविन्यास के रूप में नियंत्रक' और $ घड़ी



Answers

मैं आमतौर पर यह करता हूं:

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

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>  



ईएस 6 सिंटैक्स में $ घड़ी लिखना उतना आसान नहीं था जितना कि मैंने उम्मीद की थी। यहां आप क्या कर सकते हैं:

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



"TestCtrl परीक्षण के रूप में" परीक्षण "का उपयोग करने के समान, जैसा कि किसी अन्य उत्तर में वर्णित है, आप अपने दायरे को" स्वयं "असाइन कर सकते हैं:

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 परीक्षण के रूप में") में निर्दिष्ट नाम से बंधे नहीं हैं और आप किसी फ़ंक्शन पर .bind (this) की आवश्यकता से भी बचते हैं।

... मूल एचटीएमएल निर्दिष्ट के साथ उपयोग के लिए:

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



आप वास्तव में एक फ़ंक्शन में $ घड़ी () के पहले तर्क के रूप में पास कर सकते हैं:

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

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

जिसका अर्थ है कि हम अपना यह नाम वापस कर सकते हैं। नाम संदर्भ:

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

नियंत्रक के बारे में एक दिलचस्प पोस्ट पढ़ें विषय के बारे में https://toddmotto.com/digging-into-angulars-controller-as-syntax/




यहां बताया गया है कि आप बिना $ स्कोप (और $ घड़ी!) के बिना यह कैसे करते हैं शीर्ष 5 गलतियों - दुर्व्यवहार घड़ी

यदि आप "नियंत्रक के रूप में" वाक्यविन्यास का उपयोग कर रहे हैं, तो यह $ स्कोप का उपयोग करने से बचने के लिए बेहतर और क्लीनर है।

JSFiddle में मेरा कोड यहां है। (मैं नाम रखने के लिए एक सेवा का उपयोग कर रहा हूं, अन्यथा ES5 Object.defineProperty का सेट और विधियां अनंत कॉल का कारण बनती हैं।

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



Links