angularjs指令-hello指令简单用法

在慕课看大漠穷秋老师的视频，为避免时间长了忘记，写了以下笔记，没什么创新的，不喜勿喷哦
hello指令简单用法

var myModule = angular.module("MyModule",[]);myModule.directive("hello",function(){    return {        restrict:'E',        template:'<div>Hello everyone!</div>',        replace:true    }});

restrict 匹配模式

<hello></hello><div hello></div><!-- directive:hello --><div></div><div class="hello"></div>

注意：directive:hello与左右的注释符之间要有空格

template 模板内容
templateUrl 模板的路径

模板缓存

//注射器加载完所有模块时，run方法执行一次myModule.run(function($templateCache){    $templateCache.put("hello.html","<div>hello everyone!</div>");});

template:$templateCache.get("hello.html");

replace和transclude
replace，将指令内部的内容替换

<hello><span>指令内部的内容</span></hello>

最终运行结果是

transclude，可以将指令内部的内容保存，用于指令的嵌套

myModule.directive("hello",function(){    return {        restrict:'E',        transclude:true,        template:'<div>Hello everyone!<div ng-transclude></div></div>'    }});

指令中的内容会放到ng-transclude指定的位置
最终运行结果

指令执行机制：