使用angularjs创建新指令

所以我做了一个简单的指令叫做“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”才能起作用（是的，我正在将restrict属性更改为“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”不会被调用。

首先需要澄清。。

• 我不建议过度使用

  $compile

  ，有更好的方法将事件侦听器绑定到作用域
• 我解决了这个问题，以了解编译是如何工作的，并与其他人分享

在

编译函数中操作模板元素时会发生什么情况？

编译阶段从父元素到子元素遍历DOM
当您在编译函数中操作DOM元素的子元素时，它发生在
$compile
开始收集这些子元素的指令之前，因此您对模板元素内容所做的每一个更改都将被编译，并与编译阶段的继续相链接
当您操作模板元素本身时，情况并非如此，
$compile
不会在同一元素中查找更多指令，因为它仅为每个DOM元素收集一次指令

因此，您添加的这些属性没有被编译

让$手动编译它：

我试图添加
$compile（el）
，但我的浏览器崩溃了（别嘲笑我），原因是它陷入了一个循环，在这个循环中它自己无限编译
因此，我删除了directive属性，然后再次
$compile
我设置了{优先级：1001}和{终端：true}。这个iss需要防止其他指令编译函数在我们的指令之前或手动编译之后运行

解决方案：
这是一个扑克牌：

您将指令限制为
E
类型，就像在
元素中一样，您需要查看其他限制类型、类、属性等。听起来您可能希望
限制：'A'
更改
限制：'E'
，这意味着将“限制do元素”限制为
限制：'A'
，这意味着“限制为属性”抱歉，我现在更新了，但我将属性更改为“A”。“我设置了{priority:1001}和{terminal:true}。这是为了防止其他指令编译函数在我们的指令之前或手动编译之后运行。”好的，但是如果我想使用另一个指令编译函数？你说绑定事件监听器有更好的选择，更好的选择是什么？谢谢你的解释。我会在有时间的时候更新我的答案。我发现了一个类似的问题：
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); //
      }
    }
  }
});