क्या 'गुण' परिवर्तनों को देखना संभव है

Question

क्या निर्देश पर ui परिवर्तनों के लिए "देखना" संभव है? कुछ है कि जैसे:

.directive('vValidation', function() { 
    return function(scope, element, attrs) { 
     element.$watch(function() { 
      if (this.hasClass('someClass')) console.log('someClass added'); 
     }); 
    } 
}) 

Answer 1

हां। यदि आप विशेषता पर इंटरपोलेशन का उपयोग करते हैं तो आप attr.$observe का उपयोग कर सकते हैं।

लेकिन अगर यह एक अंतर्वेशित विशेषता नहीं है और यह अपेक्षा के आवेदन में कहीं और से परिवर्तित करने की (क्या अत्यंत अनुशंसित नहीं है, Common Pitfalls पढ़ें), आप $watch कर सकते हैं की तुलना में एक समारोह वापसी:

scope.$watch(function() { 
    return element.attr('class'); 
}, function(newValue){ 
    // do stuff with newValue 
}); 

वैसे भी, शायद यह है कि आपके लिए सबसे अच्छा तरीका उस तत्व को बदल देगा जो तत्व वर्ग को बदलता है। यह किस पल बदल जाता है?

Answer 2

attrs.$observe('class', function(val){}); 

Answer 3

आप नियंत्रक में चर देख सकते हैं।

कुछ अन्य मॉड्यूल प्रतिक्रिया संदेश प्रदर्शित करने के बाद यह कोड स्वचालित रूप से अधिसूचना बार छुपाता है।

HTML:

<notification-bar 
    data-showbar='vm.notification.show'> 
     <p> {{ vm.notification.message }} </p> 
</notification-bar> 

निर्देशक:

var directive = { 
    restrict: 'E', 
    replace: true, 
    transclude: true, 
    scope: { 
     showbar: '=showbar', 
    }, 
    templateUrl: '/app/views/partials/notification.html', 
    controller: function ($scope, $element, $attrs) { 

     $scope.$watch('showbar', function (newValue, oldValue) { 
      //console.log('showbar changed:', newValue); 
      hide_element(); 
     }, true); 

     function hide_element() { 
      $timeout(function() { 
       $scope.showbar = false; 
      }, 3000); 
     } 
    } 
}; 

निर्देशक खाका:

<div class="notification-bar" data-ng-show="showbar"><div> 
    <div class="menucloud-notification-content"></div>