用angularjs创建一个新指令

Question

所以我要创建一个简单的指令“ hover”，这是一个基本的导航菜单，当您将鼠标移到特定的aba上时，此aba会改变颜色。看我的脚本代码：

var app = angular.module('myModule', []);
app.directive('hover', function(){
    return{
        restrict: 'E',
        controller: function($scope) {
            $scope.hover    = null;
            $scope.selected = null;

            $scope.onHover = function (index){
                $scope.hover = index;
            }
            $scope.mouseLeave = function(){
                if($scope.selected)
                    $scope.hover = $scope.selected;
                else
                    $scope.hover = -1;
            }
            $scope.onClick = function(index) {
                $scope.hover    = index;
                $scope.selected = index;
            }

        },
        compile: function(el, attrs){
            el.children().attr('data-ng-mouseover', 'onHover('+attrs.index+')');
            el.children().attr('data-ng-mouseleave', 'mouseLeave()');
            el.children().attr('data-ng-click', 'onClick('+attrs.index+')');
            el.children().attr('data-ng-class', '{'+ attrs.onhover +': hover == ' + attrs.index + ' || selected == ' + attrs.index + '}');
        }
    }
});

现在我的HTML：

<ul>
    <hover index="0" onhover="hover"><li>Home</li></hover>
    <hover index="1" onhover="hover"><li>About Us</li></hover>
    <hover index="2" onhover="hover"><li>Contact</li></hover>
    <hover index="3" onhover="hover"><li>Share with us!</li></hover>
</ul>

这工作正常，但是当我以这种方式放置html时：

<ul>
    <li hover index="0" onhover="hover">Home</li>
    <li hover index="1" onhover="hover">About Us</li>
    <li hover index="2" onhover="hover">Contact</li>
    <li hover index="3" onhover="hover">Share with us!</li>
</ul>

这是行不通的，我必须用“ hover”标签包裹我的“ li”才能完成这项工作（是的，我正在将strict属性更改为“ A”），为什么呢？还有另一个问题，用“
hover”标签包装我的“ li”是验证我的html的坏招吗？

这是我的html编译的：

<ul>
<li onhover="hover" index="0" hover="" data-ng-mouseover="onHover()">Home</li>
<li onhover="hover" index="1" hover="" data-ng-mouseover="onHover()">About Us</li>
<li onhover="hover" index="2" hover="" data-ng-mouseover="onHover()">Contact</li>
<li onhover="hover" index="3" hover="" data-ng-mouseover="onHover()">Share with us!</li>
</ul>

当我将鼠标移到这些元素上时，不会调用我的函数“ onHover”。

Answer 1

首先澄清一下。

• 我不建议过度使用$compile，有更好的方法将事件侦听器绑定到作用域。
• 我为我解决了这个问题，以学习编译的工作原理并与他人分享。

在内处理模板元素时会发生什么compile function？

• 编译阶段将DOM从父元素迭代到子元素。
• 当您在编译函数中操作DOM元素的$compile子元素时，它会在这些子元素收集指令之前发生，因此，您对template元素的内容所做的每次更改都将被编译并与编译阶段的继续进行链接。
• 当你操纵这是不是这样 的模板元素本身 ，那么$compile就不会寻找更多的指令在同一元素，因为它是 唯一收集每个每个DOM元素一次指令 。
• 因此，您添加的这些属性只是不被编译！

让$手动编译它：

• 我尝试添加，$compile(el)但是我的浏览器崩溃了（ 不要嘲笑我 ），原因是它陷入了一个循环，无限循环地进行自我编译。
• 因此，我删除了指令属性，然后$compile再次删除。
• 我设置了{ priority：1001 } 和 { terminal：true }。这是需要防止其他指令编译功能在我们的指令之前或手动编译之后运行的。

解：

这是一个小矮人：http
://plnkr.co/edit/x1ZeigwhQ1RAb32A4F7Q?p=preview

app.directive('hover', function($compile){
  return{
    restrict: 'A',
    controller: function($scope) {

       // all the code
    },

    priority: 1001, // we are the first

    terminal: true, // no one comes after us

    compile: function(el, attrs){

      el.removeAttr('hover'); // must remove to prevent infinite compile loop :()

      el.attr('data-ng-mouseover', 'onHover('+attrs.index+')');
      el.attr('data-ng-mouseleave', 'mouseLeave()');
      el.attr('data-ng-click', 'onClick('+attrs.index+')');
      el.attr('data-ng-class', '{'+ attrs.onhover +': hover == ' + attrs.index + ' || selected == ' + attrs.index + '}');

      var fn =  $compile(el); // compiling again

      return function(scope){
        fn(scope); //
      }
    }
  }
});