Angularjs中自定义指令(附综合demo)
发布于 9 年前 作者 lxf 4408 次浏览 最后一次编辑是 8 年前 来自 分享

#Angularjs中自定义指令 一共有四种形式：

1.一个html元素 (<date-picker></date>).
2.元素上的一个属性(<input type="text" date-picker/>).
3.当成一个class(<input type="text" class="date-picker"/>).
4.当成一个注释(<!--directive:date-picker-->).

看下一般的指令最基本的定义形式:

var app = angular.module('myapp', []);
 
app.directive('helloUpsnail', function() {
  return {
      restrict: 'AE',
      replace: 'true',
      template: '<h3>Hello World!!</h3>'
  };
});

app.directive()这个方法主要是用来在我们项目里注册一个指令。第一个参数表示指令名称，第二个是用来接收定义指令的方法的一个对象。如果你定义的指令可能需要别的依赖比如：$rootScope, $http,或者$compile，那你可以注入在这儿。 指令定义好之后，可以像html元素一样使用：

<hello-upsnail/>//我肯定选这种，因为，我喜欢-不喜欢:,其次代码量最少
或者
<hello:upsnail>
或者又像一个属性这样写:
<div hello-upsnail>haha</div>
或者
<div hello:upsnail />

但在HTML5中，可能在一些自带的验证地方，向如上这么写不行，可以向如下这么写：

<div data-hello-upsnail></div>
 
或者
 
<div x-hello-upsnail></div>

当在匹配指令的时候，angular会跳过前缀x-和data-,并且将-或者：转成驼峰写法，这就是为什么明明指令是:helloUpsnail,但在html中我写成hello-upsnail的原因。

现在我们解释下在文章开头定义指令的代码中，有个配置项: restrict:‘AE’,我们定义成AE表示，自定义指令可以写成一个html元素或者一个属性，如果我们想定义成一个class，那必须得把restrict定义成AEC。

template：这个说明符将在指令编译后生成html标签，不一定非得是一个简单的字符串，可以很复杂或者包含其他指令、表达式({{}})。

replace:指示，是否将指令用html标签去替换。设置为true的时候，表示我们的helloUpsnail指令将会在html中被替换掉。

我们来看一个综合的例子，上手敲下，然后改改就能收货更多(可以直接运行)

链接：大蜗牛

回到顶部