동적 요소가 AngularJS에서 지시 함수를 호출하지 않습니다

Question

이 지시문을 사용하고자하는 의도는 Select-All 지시문을 만드는 것입니다.이 지시문은 재사용 할 html 요소에 연결할 수 있습니다.

커피 스크립트 :

App.directive "selectAll", [ -> 
    restrict: 'A', 
    replace : true, 
    scope: { 
    attribute: '@', 
    collection: '=' 
    }, 
    link: (scope, element, attrs, model) -> 
    scope.selected = false 

    element.attr 'ng-click', 'toggle_selection()' 
    element.html "<i class='icon-check icon-white''></i>Select All" 

    scope.toggle_selection =() -> 
     scope.selected = !scope.selected 
     collection.forEach (item) -> 
     item[attribute] = scope.selected 
     scope.toggle_content() 

    scope.toggle_content =() -> 
     element.html("<i class='icon-check icon-white'></i>Select All") unless scope.selected 
     element.html("<i class='icon-check-empty icon-white'></i>Unselect All") if scope.selected 
] 

자바 스크립트 :

App.directive("selectAll", [ 
    function() { 
     return { 
     restrict: 'A', 
     replace: true, 
     scope: { 
      attribute: '@', 
      collection: '=' 
     }, 
     link: function(scope, element, attrs, model) { 
      scope.selected = false; 
      element.attr('ng-click', 'toggle_selection()'); 
      element.html("<i class='icon-check icon-white''></i>Select All"); 
      scope.toggle_selection = function() { 
      scope.selected = !scope.selected; 
      collection.forEach(function(item) { 
       return item[attribute] = scope.selected; 
      }); 
      return scope.toggle_content(); 
      }; 
      return scope.toggle_content = function() { 
      if (!scope.selected) { 
       element.html("<i class='icon-check icon-white'></i>Select All"); 
      } 
      if (scope.selected) { 
       return element.html("<i class='icon-check-empty icon-white'></i>Unselect All"); 
      } 
      }; 
     } 
     }; 
    } 
    ]); 

문제는 toggle_selection 함수가 호출되지 않을 것입니다. 나는 동적으로 생성 한 요소에 $compile을 호출하기 위해 tryied하지만 컴파일이 정의되어 있지 않다는 예외를 발생시킵니다.

또한 내가 일주일 동안 Angular를 사용하고 있기 때문에 내가하는 일을 더 잘 수행 할 수 있다면 모범 사례를 공유하십시오.

감사합니다.

Answer 1

나는 이유를 발견하지 않았다, 그래서 나는 @Chandermanji

지침 문서의 template` 재산`에서

App.directive "selectall", [ -> 
    restrict: 'E', 
    replace : true, 
    scope: { 
    attribute: '@', 
    collection: '=' 
    }, 
    template: '<div class="btn btn-large btn-inverse" ng-click="toggle_selection(collection, attribute)">' + 
     '<i class="icon-check icon-white"></i>Select All' + 
    '</div>', 
    link: (scope, element, attrs, model) -> 
    scope.selected = false 

    scope.toggle_selection = (collection, attribute) -> 
     scope.selected = !scope.selected 
     scope.collection.forEach (item) -> 
     item[attribute] = scope.selected 
     scope.toggle_content() 

    scope.toggle_content =() -> 
     element.html("<i class='icon-check icon-white'></i>Select All") unless scope.selected 
     element.html("<i class='icon-check-empty icon-white'></i>Unselect All") if scope.selected 
]