Question

我试图仅使用angular（无jquery）复制以下jsfiddle。

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

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

绑定到尚不存在的元素的“角度方式”是什么？我怀疑我需要创建一个新指令来执行此操作，我相信我可能需要注入$编译以编译新添加的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')
        };
    };
});

AngularJS - 附加到DOM并绑定事件

2 个答案: