视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
angular的自定义指令如何使用
2020-11-27 19:59:24 责编:小采
文档


这次给大家带来angular的自定义指令如何使用,使用angular自定义指令的注意事项有哪些,下面就是实战案例,一起来看一下。

自定义指定

angular.module('dir',[ ]).directive( 'mydir' ,function( ){ return {template:'<div>hello</div>'}} )

自定义指定对原有html的属性扩展。

指定的应用:

<div mydir> </div>写成自定义属性 ----A----属性
-<mydir></mydir>写成元素。注意如果需要改变模板路径里面的内容,就需要使用ng-transclude,然后在模板指令的配置项里写
return {templateUrl :../template.html,transclued:true} -----E----元素

可以在配置项里写templateUrl(scope:{footer:@footer}) (注意@footer中的元素标签里面的footer是属性),

Error: $compile:iscp
Invalid Isolate Scope Definition
Description
When declaring isolate scope the scope definition object must be in specific format which starts with mode character (@&=<), after which comes an optional ?, and it ends with an optional local name.
myModule.directive('directiveName', function factory() { return {
 ...
 scope: { 'localName': '@', // OK
 'localName2': '&attr', // OK
 'localName3': '<?attr', // OK
 'localName4': ' = attr', // OK
 'localName5': ' =*attr', // OK 
 'localName6': 'attr', // ERROR: missing mode @&=<
 'localName7': 'attr=', // ERROR: must be prefixed with @&=<
 'localName8': '=attr?', // ERROR: ? must come directly after the mode
 'localName9': '<*' // ERROR: * is only valid with =
 }
 ...
 }
});

指令中多个单词采用驼峰命名法('myDir')。在html中可以使用my-dir来写指令,因为html不区分大小写。
-- templateUrl(scope:{footer:@footer},replace:true)中的replace:true,可以替换掉自定义指定形成的标签。

指定的类的形式:<div class='mydir'></div>,但是因为默认是A||E,所以要加一个匹配模式配置项:
templateUrl(scope:{footer:@footer}, restrict:C)就可以添加成功。 ------C类------

总共有四种匹配模式:A,C,E,M(注释,比较少用),如果不写匹配模式,默认为A || E.

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

$watch,$apply和$digest数据绑定过程详解

javascript的必包详解

js的内置对象有哪些

下载本文
显示全文
专题