AngularJS : 지시어의 속성을 모니터하는 방법은 무엇입니까?

아래 코드에서 지시문의 카운터를 높이고 배경색을 변경하고 싶습니다. 카운터가 짝수이면 배경색은 '빨간색'이어야하며, 그렇지 않으면 '녹색'이어야합니다.AngularJS : 지시어의 속성을 모니터하는 방법은 무엇입니까?

그러나 카운터는 작동하지만 배경은 절대로 변경되지 않습니다. 내 코드에 무슨 문제가 있습니까?

BTW, 두 개의 다른 질문 : 심지어는 버튼의 NG 클릭 이벤트라고

경고 대화 상자가 표시되지 않습니다. 왜?
'카운터 ++'는 ng-click에서 작동하지 않는 것 같습니다. 'counter = counter + 1'이어야합니다. 맞습니까?

자바 스크립트 :

function myDirective(){ 
     return { 
      template: '<div>{{count}}</div>', 
      replace: false, 
      transclude: false, 
      restrict: 'A', 
      scope: {count:'='}, 
      link: function(scope, el, attrs){ 

       //------------- Observe 'count' ---------------- 
       attrs.$observe('count', function(newVal, oldVal){ 
        var bgColor = newVal % 2 == 0 ? 'red' : 'green'; 
        angular.element(el).css('background-color', bgColor); 

       }); 
      } 

     }; 
    }; 
    angular.module('app', []).directive('myDirective', myDirective);

HTML 다음 = 구문을 사용하여 분리 범위 변수에 대한

<body data-ng-app='app' data-ng-init="count=1"> 
     <button ng-click='alert("aa"); count=count+1; '>Increase</button> 
     <div my-directive count='count'> 
    </body>

출처

2013-08-31 Zach

사용 scope.$watch() 대신 attrs.$observe(). 합니다 (@ 구문을 준수 $ 사용합니다.)

NG 클릭(), 모든 기능이 (그래서 경고의 $ 범위에서 호출) 내부 fiddle

이된다 $ scope.alert을()하는가 정의되지 않았습니다. (그 이유는 Dean입니다.)

각도는 eval을 사용하지 않으므로, count++과 같은 것은 작동하지 않습니다. 자세한 내용은 Brandon's answer을 참조하십시오.

출처

2013-08-31 15:13:26

와우, 많은 감사합니다. – Zach

AngularJS : 지시어의 속성을 모니터하는 방법은 무엇입니까?

답변

관련 문제