AngularJS附加DOM?

时间:2015-10-29 04:54:52

标签: jquery

我是使用AngularJS的新手。我使用AngularJS加载数据很好,但是我在加载的项目上遇到了基本的jQuery点击事件。使用以下代码:

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

这不起作用所以我很好奇是否在使用AngularJS迭代元素时,如果它实际上没有附加DOM,那么在使用这个jQuery函数时,它实际上并没有看到我点击的元素。感谢您的帮助。

更新:因此,“元素”div将在页面上重复x次。当我点击其中一个时,我想要一个警告,弹出“Element”中孩子的内容。这没有发生,所以我很好奇AngularJS实际上将“Element”类附加到DOM。谢谢!

1 个答案:

答案 0 :(得分:0)

Here就是一个例子

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