javascript - पैरामीटर परिवर्तन पर कोणीय निर्देश ताज़ा करें





angularjs angularjs-directive angularjs-scope (5)


मुझे आशा है कि इससे माता-पिता के दायरे से मूल्य पर पुनः लोड / रीफ्रेशिंग निर्देश मदद मिलेगी

<html>

        <head>
            <!-- version 1.4.5 -->
            <script src="angular.js"></script>
        </head>

        <body ng-app="app" ng-controller="Ctrl">

            <my-test reload-on="update"></my-test><br>
            <button ng-click="update = update+1;">update {{update}}</button>
        </body>
        <script>
            var app = angular.module('app', [])
            app.controller('Ctrl', function($scope) {

                $scope.update = 0;
            });
            app.directive('myTest', function() {
                return {
                    restrict: 'AE',
                    scope: {
                        reloadOn: '='
                    },
                    controller: function($scope) {
                        $scope.$watch('reloadOn', function(newVal, oldVal) {
                            //  all directive code here
                            console.log("Reloaded successfully......" + $scope.reloadOn);
                        });
                    },
                    template: '<span>  {{reloadOn}} </span>'
                }
            });
        </script>


   </html>

मेरे पास एक कोणीय निर्देश है जिसे प्रारंभ किया गया है:

<conversation style="height:300px" type="convo" type-id="{{some_prop}}"></conversation>

मैं चाहता हूं कि यह निर्देश को रीफ्रेश करने के लिए पर्याप्त स्मार्ट हो, जब $scope.some_prop परिवर्तन हो, जैसा कि इसका तात्पर्य है कि इसे पूरी तरह से अलग सामग्री दिखाना चाहिए।

मैंने इसका परीक्षण किया है क्योंकि यह कुछ भी नहीं होता है, लिंकिंग फ़ंक्शन को तब भी कॉल नहीं किया जाता है जब $scope.some_prop बदल जाता है। क्या ऐसा करने का कोई तरीका है?




angular.module('app').directive('conversation', function() {
    return {
        restrict: 'E',
        link: function ($scope, $elm, $attr) {
            $scope.$watch("some_prop", function (newValue, oldValue) {
                  var typeId = $attr.type-id;
                  // Your logic.
            });
        }
    };
}



लिंक फ़ंक्शन केवल एक बार बुलाया जाता है, इसलिए यह सीधे आप जो भी कर रहे हैं वह सीधे नहीं करेगा। मॉडल चर $watch लिए आपको कोणीय $watch का उपयोग करने की आवश्यकता है।

इस घड़ी को लिंक फ़ंक्शन में सेट अप करने की आवश्यकता है।

यदि आप निर्देश के लिए अलग-अलग दायरे का उपयोग करते हैं तो दायरा होगा

scope :{typeId:'@' }

अपने लिंक फ़ंक्शन में आप एक घड़ी जोड़ते हैं

link: function(scope, element, attrs) {
    scope.$watch("typeId",function(newValue,oldValue) {
        //This gets called when data changes.
    });
 }

यदि आप अलग-अलग स्कोप उपयोग का उपयोग नहीं कर रहे हैं तो some_prop पर some_prop




आप जो करने की कोशिश कर रहे हैं वह निर्देश में गुण की संपत्ति की निगरानी करना है। आप निम्नानुसार $ निरीक्षण () का उपयोग करके विशेषता परिवर्तन की संपत्ति देख सकते हैं:

angular.module('myApp').directive('conversation', function() {
  return {
    restrict: 'E',
    replace: true,
    compile: function(tElement, attr) {
      attr.$observe('typeId', function(data) {
            console.log("Updated data ", data);
      }, true);

    }
  };
});

ध्यान रखें कि मैंने निर्देश में 'संकलन' फ़ंक्शन का उपयोग किया है क्योंकि आपने उल्लेख नहीं किया है कि आपके पास कोई मॉडल है या नहीं और यह प्रदर्शन संवेदनशील है या नहीं।

यदि आपके पास मॉडल हैं, तो आपको ' कंपाइल ' फ़ंक्शन को ' लिंक ' में बदलने या ' नियंत्रक ' का उपयोग करने और मॉडल परिवर्तनों की संपत्ति की निगरानी करने की आवश्यकता है, आपको $ watch () का उपयोग करना चाहिए, और कोणीय {{}} संपत्ति से ब्रैकेट, उदाहरण:

<conversation style="height:300px" type="convo" type-id="some_prop"></conversation>

और निर्देश में:

angular.module('myApp').directive('conversation', function() {
  return {
    scope: {
      typeId: '=',
    },
    link: function(scope, elm, attr) {

      scope.$watch('typeId', function(newValue, oldValue) {
          if (newValue !== oldValue) {
            // You actions here
            console.log("I got the new value! ", newValue);
          }
      }, true);

    }
  };
});



सरल परीक्षण केस (शीर्षक को अनदेखा करें, यदि इंजन का प्रकार स्थिर है तो संख्याओं का दूसरा सेट अनुक्रमिक होना चाहिए)।

आईई का सॉर्ट तब तक स्थिर रहा है जब तक मैंने इसे कभी भी उपयोग नहीं किया है (इसलिए आईई 6)। IE8 में फिर से जांच कर रहा है और ऐसा लगता है कि यह अभी भी मामला है।

और यद्यपि आप जिस मोज़िला पेज से लिंक करते हैं, वह कहता है कि फ़ायरफ़ॉक्स का प्रकार स्थिर है, मैं निश्चित रूप से कहता हूं कि यह हमेशा फ़ायरफ़ॉक्स 2.0 (और सहित) के मामले में नहीं था।

कुछ कर्सर परिणाम:

  • आईई 6 +: स्थिर
  • फ़ायरफ़ॉक्स <3: अस्थिर
  • फ़ायरफ़ॉक्स> = 3: स्थिर
  • क्रोम <= 5 (यानी, सभी संस्करणों को आज तक): अस्थिर
  • ओपेरा <10: अस्थिर
  • ओपेरा> = 10: स्थिर
  • सफारी 4: स्थिर

विंडोज़ पर सभी परीक्षण।

यह भी देखें:





javascript angularjs angularjs-directive angularjs-scope