AngularJS - 附加到DOM並綁定一個事件

Question

我想複製下面的jsfiddle只使用角度（沒有jQuery）。

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

基本上我想設置事件偵聽器綁定到其目前還不存在的元素。與jQuery這可以實現：

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

什麼是綁定到還不存在元素「角辦法」？我懷疑我需要創建一個新的指令來做到這一點，我相信我可能需要注入$ compile來編譯新添加的DOM元素。我是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') 
     }; 
    }; 
});