指令 

var appModule = angular.module('app', []);    appModule.directive('hello', function() 
{
    return {        
            restrict: 'E',        
            template: '<div>Hi there <span ng-transclude></span>  </div>',        
            transclude: true    };
});            
<body>
        <hello>
            <br/>
            <span>原始的内容，</span><br/>
            <span>还会在这里。</span>
        </hello>
        <hello>
        </hello>
    </body>

transclude（变换）

指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签。那好，如果我们自定义的标签内部出现了子标签，应该如何去处理呢？很显然，transclude就是用来处理这种情况的。

　　

对于当前这个例子，transclude的作用可以简化地理解成：把<hello>标签替换成我们所编写的HTML模板，但是<hello>标签内部的内容保持不变。

 

很显然，由于我们没有加replace:true选项，所以<hello>标签还在，没有被替换掉。同时，通过这个例子你还还会发现一 个暗藏的属性，那就是浏览器实际上非常智能，虽然它并不认识<hello>这个标签，但是页面没有出错，它只是默默地把这个标签忽略掉了！怎 么样？是不是碉堡了？

 

你可以自己在上面的JS代码里面加上replace:true，然后再看生成的HTML结构。

 

posted @ 2016-04-11 18:09  八喜小狐狸  阅读(151)  评论(0)  编辑  收藏  举报