AngularJS - 将元素添加到DOM并绑定事件

Question

我想用Angular（而非jQuery）来复制以下jsfiddle：

http://jsfiddle.net/E7xER/381/ 基本上，我想设置事件监听器以绑定到尚不存在的元素。 使用jQuery可以通过以下方式实现：

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

如何使用“angular way”绑定尚不存在的元素？我猜想我需要创建一个新的指令来实现这一点，我认为我可能需要注入$compile来编译新添加的DOM元素。虽然我是AngularJS的新手，但我不确定如何实现这一点。

- circuitry

Answer 1

像这样？

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: {
        }
    };
});

- Jesus is Lord

Answer 2

个人而言，我会为此创建一个控制器。

这是您的使用控制器的示例。

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')
        };
    };
});

- knrz

---

我肯定想评估/了解控制器方法。在你的fiddle中，第一个不是红色的框变成了红色，而不是被点击的任何框。我相信这一定是一个小错误。 - circuitry