AngularJS Appending the DOM?

Question

I'm fairly new to using AngularJS. I'm fine with loading data using AngularJS, but I'm having trouble with basic jQuery click events on the items I'm loading. Using the code below:

<div ng-repeat="x in data" class="element">
    <span class="text">This is the text to grab</span>  
</div>

$(document).ready(function(){
    $('.element').on('click',function(){
        var $text = $(this).find('.text').text();
        alert($text);
    });
});

This doesn't work so I'm curious if when iterating elements with AngularJS, if it doesn't actually append the DOM so when using this jQuery function, it doesn't actually see the element I'm clicking on. Your help is appreciated.

UPDATE: So, the "Element" div will repeat across the page x number of times. When I click on one of them, I want an alert to pop up with the content in that child of "Element". This isn't happening, so I'm curious about the "Element" class actually be appended to the DOM by AngularJS. Thanks!

There is no element named `element`, use `p` or `h1` or some other valid HTML element like `$('p').on` — Sarjan Desai, Oct 29 '15 at 04:57
See the answer here- http://stackoverflow.com/questions/30332945/jquery-click-events-not-working-with-angularjs Why are you trying to mix jquery, same can be achieved using angular. — Raul, Oct 29 '15 at 06:52
Any error you see on console? Have you included jQuery before Angular.js in your html file? — Sudhansu Choudhary, Oct 29 '15 at 10:28

score 0 · Accepted Answer · answered Oct 29 '15 at 07:34

Here is an example

<div ng-app="myApp">
    <div ng-controller="AvengersCtrl">
        <input type="text" ng-model="search.$" />
        <table>
            <tr ng-repeat="actor in avengers.cast | filter:search">

                <td><button ng-click="clickMe(actor)">Click me</button></td>
                <td>{{actor.name}}</td>
                <td>{{actor.character}}</td>
            </tr>
        </table>
    </div>
</div>

var myApp = angular.module('myApp', []);
function AvengersCtrl($scope) {
    $scope.avengers = {
        cast: [
            {
            name: "Robert Downey Jr.",
            character: "Tony Stark / Iron Man"
        }, 
            {
            name: "Chris Evans",
            character: "Steve Rogers / Captain America"
        },
            {
            name: "Mark Buffalo",
            character: "Bruce Banner / The Hulk"
        }
        ]
    };

    $scope.clickMe = function(actor) {
        alert(actor.name);
    }
}

AngularJS Appending the DOM?

1 Answers1