angularjs - 使用 angularjs 查找/获取父元素

Question

我有一个里面有按钮的 div 结构。 IE。

<div ng-app="example">
    <div class="parent" data-image="1" ng-controller="ParentCtrl">
        <div class="child" data-image="2">
            <div style="overflow:hidden; margin-right:10px;">
                <input type="button" value="Press me" class="button-one" ng-click="doSomething()" />
            </div>
        </div>
    </div>
</div>

我想从我需要的地方获取 data-* 属性值。

<script type="text/javascript">
var Example = angular.module('example', []);

Example.controller('ParentCtrl', ['$scope', function($scope)
{
    $scope.doSomething = function()
    {
        // want to get data-* attribute value from .parent/.child element
    };
}]);
</script>

Action 是否知道哪个元素上的什么事件触发了它？如果是这样，那么如何访问这个元素，找到需要的父元素？

Answer 1

首先，您可以将 event[1] 作为 ng-click 函数的参数发送。像这样:

<input type="button" value="Press me" class="button-one" ng-click="doSomething($event)" />

然后在函数中，使用 angular.element[2] 得到你想要的。像这样:

Example.controller('ParentCtrl', ['$scope', function($scope)
{
    $scope.doSomething = function(event)
    {
        var target = angular.element(event.target); //this target is a jQuery lite object
        // now you can do what you want through the target
    };
}]);

[1] http://docs.angularjs.org/api/ng.directive:ngClick

[2] http://docs.angularjs.org/api/angular.element