Question

我是angularjs的新手，就像许多其他开发人员一样，我是jquery开发人员。现在我对指令有疑问。例如：如果我有这样的指令：

app.directive('mydiv',function(){
     return{
     restrict:'AE',
     template:'<div><ul><li></li><li></li><li></li></ul></div>', //of course in real case it will be use ng-repeat
     link:function(scope,element,attr){

     }
}               
})

我的困惑是，如果我需要访问任何

元素，在jquery中我们可以使用$（this），我们怎么能用angular方式呢？我可以这样做：

link: function (scope, element, attrs) {    //when hover show the delete icon for each msg and apply highlight class to it.
                element.find('li').hover(
                        function(){
                            $(this).addClass('highlight');
                            scope.deleteicon=true;
                        },
                        function(){
                            $(this).removeClass('highlight');
                            scope.deleteicon=false;
                        });                 
        }

Answer 1

您可以访问元素作为链接函数本身的第一个参数（在您的情况下为element参数）。如果你在角度之前使用带有角度和加载jquery的jquery，那么元素将被包装在jquery包装器中，即它将是一个jquery对象。如果不是angular，则使用一个名为jqlite的较轻的jquery子集。它只提供了最小的功能。

有关详细信息，请参阅element。

不要手动绑定hover事件，而应使用角度事件绑定并使用ng-class而不是添加/删除类。这样你就可以以角度方式执行操作，并且不需要通过scope.$apply()手动调用摘要周期来获取有关范围更新的DOM更新（您需要在示例中的hover伪事件中执行此操作以反映基于DOM的更新）在范围属性deleteicon）。

您的指令的示例实现将如下所示。使用角度内置指令本身可以通过多种方式实现此目的。

.directive('mydiv',function(){
     return {
     restrict:'AE',
     scope:{items:"="}, //<-- data bound from parent scope via attribute
     template:'<div><ul><li ng-mouseenter="toggleClass(true)" ng-mouseleave="toggleClass(false)" ng-class="{'highlight': action.deleteicon}" ng-repeat="item in items">{{item.name}}</li></ul></div>', //of course in real case it will be use ng-repeat
     link:function(scope,element,attr){
        scope.action = {deleteicon :true};
        scope.toggleClass = function(show){
             scope.action.deleteicon = show;
        }
     }
   }               
});

scope:{items:"="},会设置双向绑定。
不要重复li使用数据模型，而是使用项目数组并使用ng-repeat而不是复制标记（除非您需要确保这样做）。例如： - ng-repeat="item in items"
使用角度事件绑定而不是手动绑定事件，悬停只是nouseenter / mouseleave。因此，您可以使用相应的角度指令并绑定范围上的函数。即ng-mouseenter="toggleClass(true)" ng-mouseleave="toggleClass(false)"。
使用绑定到范围变量的ng-class来切换类。让angular管理DOM操作以切换元素上的css类。您只需担心绑定的数据。即ng-class="{'highlight': action.deleteicon}"

您可以找到有关角度内置指令/组件的官方文档。

Answer 2

嗯，您使用了hover，但是，您可以使用MouseOver Directive。

如下例所示：

<li ng-mouseover="high = true" ng-class="{'highlight':high}">Content</li>

Answer 3

Look at this plkr

标记：

<div class="row" ng-app="myapp" ng-controller="myctrl">
        <div class="col-lg-3 col-lg-push-3">
            <ul class="list-group">
                <li class="list-group-item" ng-init="myclass='hide'" ng-repeat="item in items"
                    ng-mouseenter="myclass = 'show'" ng-mouseleave="myclass='hide'">
                    <span>{{item}}</span>
                    <span ng-class="'pull-right glyphicon glyphicon-edit '+myclass"></span>
                </li>
            </ul>
        </div>
    </div>

脚本：

angular.module('myapp', [])
            .controller('myctrl', function ($scope) {
                $scope.items = ['abc', 'xyz', 'klm'];
            });

如何在angular指令中获取当前的dom元素

3 个答案: