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





angularjs-scope ng-controller (9)


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

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

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>  



नोट : यह तब काम नहीं करता जब दृश्य और नियंत्रक मार्ग में या निर्देश परिभाषा ऑब्जेक्ट के माध्यम से जोड़े जाते हैं। नीचे दिखाया गया है कि जब HTML में "कुछ नियंत्रक के रूप में कुछ नियंत्रक" होता है तो केवल तभी काम करता है। मार्क वी की तरह नीचे टिप्पणी में बताएं, और जैसा कि वह कहता है कि यह बेहतर है कि बोगदान ऐसा करता है।

मैं उपयोग करता हूं: var vm = this; मेरे रास्ते से "यह" शब्द प्राप्त करने के लिए नियंत्रक की शुरुआत में। फिर vm.name = 'Max'; और घड़ी में मैं return vm.name । मैं "vm" का उपयोग करता हूं जैसे कि @ बोगदान "स्वयं" का उपयोग करता है। यह var, यह "vm" या "self" की आवश्यकता है क्योंकि "यह" फ़ंक्शन के अंदर एक अलग संदर्भ पर ले जाता है। (इसलिए यह वापस लौटना। नाम काम नहीं करेगा) और हाँ, आपको $ घड़ी तक पहुंचने के लिए अपने सुंदर "नियंत्रक के रूप में" समाधान में $ स्कोप इंजेक्ट करने की आवश्यकता है। जॉन पापा की स्टाइल गाइड देखें: 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);
    });
}



AngularJs 1.5 नियंत्रक संरचना के लिए डिफ़ॉल्ट $ ctrl का समर्थन करता है।

$scope.$watch("$ctrl.name", (value) => {
    console.log(value)
});



"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>



आप उपयोग कर सकते हैं:

   $scope.$watch("test.name",function(value){
        console.log(value)
   });

यह आपके उदाहरण के साथ JSFiddle काम कर रहा है।




आप $Changes कोणीय घटक जीवन चक्र का उपयोग कर सकते हैं।

यहां दस्तावेज़ देखें: docs.angularjs.org/guide/component घटक-आधारित एप्लिकेशन अनुभाग के अंतर्गत




यहां बताया गया है कि आप बिना $ स्कोप (और $ घड़ी!) के बिना यह कैसे करते हैं शीर्ष 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);
        }
    }); 
});



बस प्रासंगिक संदर्भ बांधें।

$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 का जवाब वास्तव में समकक्ष है, दोनों जवाब सही संदर्भ के साथ बाध्यकारी कोशिश करते हैं। हालांकि, मुझे उसका जवाब क्लीनर मिला।

ऐसा करने के बाद, सबसे पहले और सबसे महत्वपूर्ण, आपको इसके पीछे अंतर्निहित विचार को समझना होगा

अद्यतन 2:

उन लोगों के लिए जो ES6 का उपयोग करते हैं, arrow function का उपयोग करके आपको सही संदर्भ OOTB के साथ एक फ़ंक्शन मिलता है।

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

Example




jQuery

jQuery getElementByHerpDerpछोटे और क्रॉस-ब्राउज़र जैसे हास्यास्पद लंबे जावास्क्रिप्ट कमांड बनाता है।

AngularJS

AngularJS आपको अपने स्वयं के HTML टैग / विशेषताओं को बनाने की अनुमति देता है जो गतिशील वेब अनुप्रयोगों के साथ अच्छी तरह से काम करते हैं (क्योंकि HTML को स्थिर पृष्ठों के लिए डिज़ाइन किया गया था)।

संपादित करें:

कह रहा है "मेरे पास एक jQuery पृष्ठभूमि है, मैं एंगुलरजेएस में कैसे सोचूं?" यह कहने की तरह है "मेरे पास एक HTML पृष्ठभूमि है जो मुझे जावास्क्रिप्ट में कैसे लगता है?" तथ्य यह है कि आप सवाल पूछ रहे हैं कि आपको इन दो संसाधनों के मौलिक उद्देश्यों को समझने की संभावना नहीं है। यही कारण है कि मैंने सूची के माध्यम से मौलिक अंतर को इंगित करके प्रश्न का उत्तर देना चुना, "एंगुलरजेएस निर्देशों का उपयोग करता है जबकि jQuery एक jQuery ऑब्जेक्ट बनाने के लिए सीएसएस चयनकर्ताओं का उपयोग करता है जो यह और वह आदि करता है ...." । इस सवाल के लिए एक लंबा जवाब की आवश्यकता नहीं है।

jQuery ब्राउज़र में प्रोग्रामिंग जावास्क्रिप्ट को आसान बनाने का एक तरीका है। छोटे, क्रॉस-ब्राउज़र कमांड इत्यादि।

AngularJS HTML को बढ़ाता है, इसलिए आपको <div>केवल एप्लिकेशन बनाने के लिए जगह पर रखना नहीं है । यह एचटीएमएल वास्तव में उन अनुप्रयोगों के लिए काम करता है जो इसके लिए डिजाइन किए गए थे, जो स्थैतिक, शैक्षणिक वेब पेज हैं। यह जावास्क्रिप्ट का उपयोग करके एक चौराहे के रास्ते में इसे पूरा करता है, लेकिन मूल रूप से यह HTML का विस्तार है, जावास्क्रिप्ट नहीं।





javascript angularjs angularjs-scope ng-controller