angularJS 自定义指令属性：templateUrl

发布时间：2020-12-17 09:50:46 所属栏目：安全来源：网络整理

导读：angularJS自定义指令中，设置指令的属性template可以定义需要的dom元素，除了使用template，还可以用templateUrl，这个templateUrl可以设置为一个页面的相对路径，如：templateUrl : ' tmp/other.html ' ，意为使用other.html的内容作为模板dom。或者把temp

angularJS自定义指令中，设置指令的属性template可以定义需要的dom元素，除了使用template，还可以用templateUrl，这个templateUrl可以设置为一个页面的相对路径，如：templateUrl : ' tmp/other.html ' ，意为使用other.html的内容作为模板dom。或者把templateUrl设置为一个id，如：templateUrl : ' customDiv2 ' ，意为使用customDiv2的内容作为模板dom，但要注意customDiv2标签是这样的：

<script type="text/ng-template" id="customDiv2">
        <div>
            hello {{name}} customDiv2内容
        </div>
    </script>
  
示例:
文件结构：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vendor/angular/angularjs.js"></script>
    <script src="app/index.js"></script>
</head>
<body>
<div ng-app="myApp">

    <div ng-controller="firstController">
        <h3>custom-tags指令：</h3>
        <custom-tags></custom-tags>
        <br>
        <h3>custom-tags2指令：</h3>
        <custom-tags2></custom-tags2>
    </div>

    <!--custom-tags2指令的dom模板-->
    <script type="text/ng-template" id="customDiv2">
        <div>
            模板customDiv2的内容 {{name}}
        </div>
    </script>

</div>
</body>
</html>
other.html:
<div>
    other页面的内容 {{name}}
</div>
index.js:
angular.module('myApp',[])
    .directive('customTags',function(){
        return {
            restrict:'ECAM',templateUrl:'tmp/other.html',//用法1，以另一个页面为模板，注意相对路径是针对index.html的
            replace:true
        }
    })
    .directive('customTags2',templateUrl:'customDiv2',//用法2：以id="customDiv2"的元素为模板
            replace:true
        }
    })
    .controller('firstController',['$scope',function($scope){
        $scope.name='张三';
    }]);
运行index.html结果：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

angularJS 自定义指令 属性：templateUrl

angularJS 自定义指令属性：templateUrl