AngularJs 1.5 - घटक वॉचर्स का समर्थन नहीं करता है, आसपास का काम क्या है?



Answers

$watch ऑब्जेक्ट $scope ऑब्जेक्ट के अंदर उपलब्ध है, इसलिए आपको अपने कंट्रोलर फ़ैक्टरी फ़ंक्शन के अंदर $scope जोड़ना होगा और फिर वेरिएबल पर वॉचर डालना होगा।

$scope.$watch(function(){
    return myBox.game;
}, function(newVal){
   alert('Value changed to '+ newVal)
});

डेमो यहाँ

नोट: मुझे पता है कि आपने $scope की निर्भरता को दूर करने के लिए directive को directive कर दिया है ताकि आप कोणीय 2 के करीब एक कदम प्राप्त कर सकें। लेकिन ऐसा लगता है कि इस मामले के लिए इसे हटाया नहीं गया था।

अद्यतन करें

मूल रूप से कोणीय 1.5 जोड़ा जाता है .component विधि jus दो अलग कार्यक्षमता को अलग करता है। component तरह। विशिष्ट व्यवहार करने के लिए selector चयन करने के लिए, जहां directive डीओएम को विशिष्ट व्यवहार जोड़ना है। निर्देश डायरेक्टिव डीडीओ (डायरेक्टिव डेफिनिशन ऑब्जेक्ट) पर सिर्फ रैपर विधि है। केवल आप जो देख सकते हैं, उन्होंने .component विधि का उपयोग करते समय link/compile फ़ंक्शन को हटा दिया था जहां आपके पास कोणीय संकलित डीओएम प्राप्त करने की क्षमता थी।

Angular घटक जीवन चक्र हुक के $doCheck / $doCheck लाइफसाइकिल हुक पर $doCheck उपयोग करें, वे कोणीय 1.5.3+ संस्करण के बाद उपलब्ध होंगे।

$ onChanges (changeObj) - जब भी बाइंडिंग अपडेट होते हैं तो कॉल किया जाता है। परिवर्तन ओबीजे एक हैश है जिनकी चाबियाँ बाध्य गुणों के नाम हैं।

$ docheck () - परिवर्तन बाध्यकारी करते समय पाचन चक्र के प्रत्येक मोड़ पर बुलाया जाता है। परिवर्तनों का पता लगाने और कार्य करने का अवसर प्रदान करता है।

घटक के अंदर एक ही फ़ंक्शन का उपयोग करके यह सुनिश्चित होगा कि आपका कोड कोणीय 2 पर जाने के लिए संगत हो।

Question

मैं अपने कस्टम निर्देशों को नए घटक विधि में अपग्रेड कर रहा हूं। मैंने पढ़ा है कि घटक वॉचर्स का समर्थन नहीं करता है। क्या ये सही है? यदि ऐसा है तो आप किसी ऑब्जेक्ट पर परिवर्तनों का पता कैसे लगाते हैं। एक मूल उदाहरण के लिए मेरे पास कस्टम घटक mybox है जिसमें गेम पर बाध्यकारी वाला एक बाल घटक गेम है। यदि गेम घटक में कोई बदलाव गेम है तो मैं mybox के भीतर एक अलर्ट संदेश कैसे दिखा सकता हूं? मैं समझता हूं कि आरएक्सजेएस विधि यह है कि यह पूरी तरह से कोणीय में करना संभव है? मेरा जेएस फिडेल जेएस फिडल

जे एस

var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope) {

   $scope.name = "Tony Danza";

});

app.component("myBox",  {
      bindings: {},
      controller: function($element) {
        var myBox = this;
        myBox.game = 'World Of warcraft';
        //IF myBox.game changes, show alert message 'NAME CHANGE'
      },
      controllerAs: 'myBox',
      templateUrl: "/template",
      transclude: true
})
app.component("game",  {
      bindings: {game:'='},
      controller: function($element) {
        var game = this;


      },
      controllerAs: 'game',
      templateUrl: "/template2"
})

एचटीएमएल

<div ng-app="myApp" ng-controller="mainCtrl">
  <script type="text/ng-template" id="/template">
    <div style='width:40%;border:2px solid black;background-color:yellow'>
      Your Favourite game is: {{myBox.game}}
      <game game='myBox.game'></game>
    </div>
  </script>

 <script type="text/ng-template" id="/template2">
    <div>
    </br>
        Change Game
      <textarea ng-model='game.game'></textarea>
    </div>
  </script>

  Hi {{name}}
  <my-box>

  </my-box>

</div><!--end app-->



ng-change के उपयोग के संबंध में एक छोटा सिर-अप, स्वीकृत उत्तर के साथ अनुशंसित, एक कोणीय 1.5 घटक के साथ।

यदि आपको एक घटक देखने की आवश्यकता है जो ng-model और ng-change काम नहीं करता है, तो आप पैरामीटर को इस प्रकार पास कर सकते हैं:

मार्कअप का उपयोग किस घटक में किया जाता है:

<my-component on-change="$ctrl.doSth()"
              field-value="$ctrl.valueToWatch">
</my-component>

घटक जेएस:

angular
  .module('myComponent')
  .component('myComponent', {
    bindings: {
      onChange: '&',
      fieldValue: '='
    }
  });

घटक मार्कअप:

<select ng-model="$ctrl.fieldValue"
        ng-change="$ctrl.onChange()">
</select>



वास्तव में अच्छा स्वीकार्य उत्तर, लेकिन मैं जोड़ सकता हूं कि आप घटनाओं की शक्ति का भी उपयोग कर सकते हैं (यदि आप करेंगे तो क्यूटी सिग्नल / स्लॉट्स में थोड़ा सा)।

एक ईवेंट प्रसारित होता है: $rootScope.$broadcast("clickRow", rowId) किसी भी अभिभावक (या यहां तक ​​कि बच्चों के नियंत्रक) द्वारा। फिर अपने नियंत्रक में आप इस तरह की घटना को संभाल सकते हैं:

$scope.$on("clickRow", function(event, data){
    // do a refresh of the view with data == rowId
});

आप इस तरह कुछ लॉगिंग भी जोड़ सकते हैं (यहां से लिया गया: https://.com/a/34903433/3147071 )

var withLogEvent = true; // set to false to avoid events logs
app.config(function($provide) {
    if (withLogEvent)
    {
      $provide.decorator("$rootScope", function($delegate) {
        var Scope = $delegate.constructor;
        var origBroadcast = Scope.prototype.$broadcast;
        var origEmit = Scope.prototype.$emit;

        Scope.prototype.$broadcast = function() {
          console.log("$broadcast was called on $scope " + this.$id + " with arguments:",
                     arguments);
          return origBroadcast.apply(this, arguments);
        };
        Scope.prototype.$emit = function() {
          console.log("$emit was called on $scope " + this.$id + " with arguments:",
                     arguments);
          return origEmit.apply(this, arguments);
        };
        return $delegate;
      });
    }
});



Links