AngularJS - DOM에 추가하고 이벤트를 바인딩합니다.

Question

각도 만 사용하여 다음 jsfiddle을 복제하려고합니다 (jquery 없음).

http://jsfiddle.net/E7xER/381/

기본적으로 아직 존재하지 않는 요소에 바인딩 할 이벤트 리스너를 설정하고 싶습니다. jQuery로이은으로 수행 할 수 있습니다

$('#container').on('click', '.class', myFunction); 

아직 존재하지 않는 요소에 결합 할 수있는 "각 방법은"무엇

?이 작업을 수행하기 위해 새 지시문을 만들어야한다고 생각합니다. 새롭게 추가 된 DOM 요소를 컴파일하기 위해 $ compile을 주입해야한다고 생각합니다. AngularJS를 처음 접했고이를 구현하는 방법을 모르겠습니다.

Answer 1

http://jsfiddle.net/dB7nt/

?

var myApp = angular.module('myApp', []); 

myApp.directive('myWidget', function() { 
    var linkFn; 
    linkFn = function(scope, element, attrs) { 
     scope.boxes = []; 

     scope.addBox = function() { 
      scope.boxes.push({}); 
     }; 

     scope.color = function (b) { 
      b.isRed = true; 
     } 
    }; 
    return { 
     restrict: 'E', 
     link: linkFn, 
     template: '<button ng-click="addBox()">Add a box</button><BR/><div><div class="box" ng-repeat="b in boxes" ng-click="color(b)" ng-class="{ red: b.isRed }"></div></div>', 
     scope: { 
     } 
    }; 
}); 

Answer 2

개인적으로 저는 이것을 위해 컨트롤러를 만들 것입니다.

여기에 fiddle using a controller이 있습니다.

이 같이

var myApp = angular.module('myApp', []); 

myApp.controller("BoxCtrl", function ($scope) { 
    $scope.boxes = []; 
    $scope.addBox = function() { 
     $scope.boxes.push(0); 
    }; 
    $scope.colorBox = function (box, index) { 
     $scope.boxes[index] = 1; 
    }; 
    $scope.isBoxClicked = function (box) { 
     return { 
      'background-color': (box == 1 ? 'red' : '#abc') 
     }; 
    }; 
});