속성 변경을 '감시'할 수 있습니까?

속성 변경을 '감시'할 수 있습니까?

---

디렉티브에서 UI 변경을 "감시"할 수 있습니까? 그런 것 :

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

---

예. attr.$observe속성에서 보간을 사용하면 사용할 수 있습니다 .

그러나 이것이 보간 된 속성이 아니고 응용 프로그램의 다른 곳에서 변경 될 것으로 예상하는 경우 (매우 권장되지 않는 것은 Common Pitfalls을 참조하십시오 ) $watch함수가 반환 할 수 있습니다 .

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

어쨌든 가장 좋은 방법은 요소 클래스를 변경하는 코드를 변경하는 것입니다. 어느 순간이 바뀌나요?

---

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

---

컨트롤러에서 변수를 볼 수도 있습니다.

이 코드는 다른 모듈이 피드백 메시지를 표시 한 후 알림 표시 줄을 자동으로 숨 깁니다.

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>

ReferenceURL : https://stackoverflow.com/questions/15911300/is-it-possible-to-watch-attributes-changes