javascript - AngularJS - 附加到 DOM 并绑定(bind)事件

Question

我正在尝试仅使用 Angular (无 jquery)复制以下 jsfiddle。

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

基本上我想设置事件监听器以绑定(bind)到尚不存在的元素。使用 jquery，这可以通过以下方式完成:

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

绑定(bind)到尚不存在的元素的“Angular 方式”是什么？我怀疑我需要创建一个新指令来执行此操作，并且我相信我可能需要注入(inject) $ 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: {
        }
    };
});