templateUrl属性

templateUrl:加载模版所要使用的URL
可以加载当前模板内对应的的text/ng-template script id
在使用chrome浏览器时，"同源策略"会阻止chrome从file://中加载模版，并显示一个"Access-Control-Allow-Origin" 不允许源为null , 可以把项目放在服务器上加载，或者给Chrome设置一个标志，命令为:chrome —allow-file-access-from-files

例子：

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

</head>
<body>
<div ng-app="myApp">

    <script type="text/ng-template" id="customTags2">
        <div>
            hello {{name}}
        </div>
    </script>

    <div ng-controller="firstController">
        <custom-tags></custom-tags>
        <custom-tags2></custom-tags2>
    </div>

</div>

<script src="//cdn.bootcss.com/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="app/index.js"></script>


</body>
</html>

app/idnex.js

var myApp = angular.module('myApp', [])

    .directive('customTags', function () {
        return {
            restrict: 'ECAM',
            templateUrl: 'tmp/other.html',
            replace: true
        }
    })

    .directive('customTags2', function () {
        return {
            restrict: 'ECAM',
            templateUrl: 'customTags2',
            replace: true
        }
    })

    .controller('firstController', ['$scope', function ($scope) {
        $scope.name = '张三';
    }]);

tmp/other.html

<div>
    {{name}}
</div>

Previousrestrict、template、replace属性 Nexttransclude、priority、terminal属性

Last updated 5 years ago

Was this helpful?

templateUrl属性

templateUrl:加载模版所要使用的URL
可以加载当前模板内对应的的text/ng-template script id
在使用chrome浏览器时，"同源策略"会阻止chrome从file://中加载模版，并显示一个"Access-Control-Allow-Origin" 不允许源为null , 可以把项目放在服务器上加载，或者给Chrome设置一个标志，命令为:chrome —allow-file-access-from-files

例子：

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

</head>
<body>
<div ng-app="myApp">

    <script type="text/ng-template" id="customTags2">
        <div>
            hello {{name}}
        </div>
    </script>

    <div ng-controller="firstController">
        <custom-tags></custom-tags>
        <custom-tags2></custom-tags2>
    </div>

</div>

<script src="//cdn.bootcss.com/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="app/index.js"></script>


</body>
</html>

app/idnex.js

var myApp = angular.module('myApp', [])

    .directive('customTags', function () {
        return {
            restrict: 'ECAM',
            templateUrl: 'tmp/other.html',
            replace: true
        }
    })

    .directive('customTags2', function () {
        return {
            restrict: 'ECAM',
            templateUrl: 'customTags2',
            replace: true
        }
    })

    .controller('firstController', ['$scope', function ($scope) {
        $scope.name = '张三';
    }]);

tmp/other.html

<div>
    {{name}}
</div>

Previousrestrict、template、replace属性 Nexttransclude、priority、terminal属性

Last updated 5 years ago

Was this helpful?