angularJs中自定义指令transclude与templateUrl详解

默认情况下，自定义指令里模板的部分会替换掉指令所使用的所有内容，那么，如果想保留这些内容，就要使用transclude属性。

1.html

 <div ng-app="module">
        <div my-exam>你好</div>
    </div>
    <script>
        var m = angular.module('module', []);
        m.directive('myExam', [function () {
            return {
                restrict: 'EA',
                template: '<h1><div ng-transclude=""></div>欢迎浏览泠泠在路上</h1>',
                /*transclude为true时，可以让 <div my-exam>你好</div>内容在template中的 <div ng-transclude=""></div>位置处显示出来*/
                transclude:true,

            }
        }]);
    </script>

效果图：

templateUrl是指令模板地址的属性，一般单独建一个文件夹，命名和指令的命名相同，以防出现问题。

2.html

<div ng-app="module">
        <div my-exam>你好</div>
    </div>
    <script>
        var m = angular.module('module', []);
        m.directive('myExam', [function () {
            return {
                restrict: 'EA',
                templateUrl:'view/myexam.html',
                /*在使用templateUrl时，使用了replace:true，需要在myexam.html文件中有一个顶层容器，即内容可以被<div></div>或其他容器包裹，不然会报错*/
                replace:true,
            }
        }]);
    </script>

myexam.html

<h1>这是myexam指令的模板</h1>

效果图：