创建具有angularjs一个新指令 [英] creating a new directive with angularjs

问题描述

所以我做了一个简单的指令称为悬停，这是一个基本的导航菜单，当你通过鼠标在一个特定的ABA，这ABA改变了颜色。请参阅我的脚本code：

so i'm making a simple directive called "hover", it's a basic nav menu that when you pass a mouse over a specific aba, this aba changes the color. See my script code:

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：

And now my 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是这样的：

This is working fine, but when i put my html in this way:

<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>

这是不行的，我有我的包裹礼与悬停的标签，使这项工作（是的，我改变了restrict属性设置为A），为什么？而另一个问题，我的包裹礼与悬停的标签是一个坏把戏验证我的HTML？

This doesn't work, i have to wrap my "li" with "hover" tag to make this work(and yes, i'm changing the restrict property to "A"), why? And another question, wrapping my "li" with "hover" tag is a bad trick to validation my html?

这是我的HTML编译：

This is my html compiled:

<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不叫

When i pass the mouse over these elements, my function: "onHover" doesn't is called.

推荐答案

• 我不建议过度使用 $编译，也有事件监听器绑定到一个范围更好的办法。


• 我解决了这个问题，我学​​习如何编写工作，并与他人分享。

First a clarification..

• I do not recommend overusing $compile, there are better ways for binding event listeners to a scope.
• I solved this question for me to learn how compilation works and to share it with others.


• 编译阶段迭代下来DOM，从家长到孩子的元素。


• 当你操纵DOM元素的孩子把它编译之前 $发生编译函数中了下来，这些子元素收集他们的指令，所以每次改变您对模板元素的内容将被编译和链接与编译阶段的延续。


• 这是不是当你操纵的的情况下，模板元素本身，然后 $编译将不寻求更多的指令在同一元素，因为它的只收集指令每一次每一个DOM元素


• 所以，你添加了这些属性，只是没有被编译！


• The compilation phase iterates down the DOM , from parent to children element.
• When you manipulate children of a DOM element inside a compile function it happens before $compile got down to these children elements to collect their directives, so every change you make to the contents of the template element will be compiled and linked with the continuation of the compilation phase.
• This is not the case when you manipulate the template element itself , then $compile will not look for more directives in that same element because it's only collecting directives once per each DOM element.
• So these attributes you added are just not being compiled!


• 我尝试添加 $编译（EL），但我的浏览器崩溃（不要我的笑），原因是它得到了进入一个循环，它的无限编制本身。


• 所以我删除指令属性，然后 $编译试。


• 我设置{的优先级：1001 } 和的{终端：真正的}。这ISS需要prevent其他指令编译功能，我们的指令之前，或手动进行编译后运行。


• I tried to add $compile(el) but my browser crashed (don't laugh at me), The reason is it got into a loop where it's infinitely compiling itself.
• So I removed the directive attribute and then $compile again.
• I set { priority:1001 } and { terminal:true }. This iss needed to prevent other directive compile functions to run before our directive or after out manual compiling.

这里是一个plunker：<一href=\"http://plnkr.co/edit/x1ZeigwhQ1RAb32A4F7Q?p=$p$pview\">http://plnkr.co/edit/x1ZeigwhQ1RAb32A4F7Q?p=$p$pview

here is a plunker: 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); //
      }
    }
  }
});

这篇关于创建具有angularjs一个新指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！