AngularJS - Append to DOM and bind an event

Question

I am trying to replicate the following jsfiddle using only angular (no jquery).

Essentially I would like to set up event listeners to bind to elements which don't yet exist. With jquery this can be accomplished with:

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

What is the "angular way" to bind to elements that do not yet exist? I suspect I will need to create a new directive to do this, and I believe I may need to inject $compile to compile the newly added DOM elements. I am new to AngularJS though and I am unsure how to implement this.

Jesus is Lord · Accepted Answer · 2014-01-11 00:40:34Z

3

http://jsfiddle.net/dB7nt/

Like this?

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

answered Jan 11, 2014 at 0:40

Jesus is Lord

15.4k11 gold badges71 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

knrz · Accepted Answer · 2014-01-11 01:01:06Z

2

Personally I would create a controller for this.

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

edited Jan 11, 2014 at 1:01

answered Jan 11, 2014 at 0:36

knrz

1,8211 gold badge12 silver badges15 bronze badges

1 Comment

circuitry Over a year ago

I definitely would like to evaluate/understand the controller approach as well. In your fiddle the first box that is not red turns red, rather than whichever box is clicked. I believe this must be a minor error.

Collectives™ on Stack Overflow

AngularJS - Append to DOM and bind an event

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related