Question

angularjs指令中的'template'和'templateUrl'有什么不同？

的index.html：

<!DOCTYPE html>
<html lang="en" ng-app="app">
  <head>
    <meta charset="utf-8">
    <title>Index</title>
  </head>
  <body>
    <child-a-drtv></child-a-drtv>
    <script src="angular.js"></script>
    <script src="app.js"></script>
  </body>
</html>

app.js：

var app = angular.module('app', []);
app.directive('childADrtv', function () {
    return {
        restrict: 'E',
        templateUrl: 'child-A-template.html',
        //template: 'A<child-b-drtv></child-b-drtv>',
        controller: function ($scope) {
            console.log('childA Controller');
        },
        link: function () {
            console.log('childA Link');
        }
    };
})

app.directive('childBDrtv', function () {
    return {
        restrict: 'E',
        templateUrl: 'child-B-template.html',
        //template: 'B<child-c-drtv></child-c-drtv>',
        controller: function ($scope) {
            console.log('childB Controller');
        },
        link: function () {
            console.log('childB Link');
        }
    };
})

app.directive('childCDrtv', function () {
    return {
        restrict: 'E',
        templateUrl: 'child-C-template.html',
        //template: 'C',
        controller: function ($scope) {
            console.log('childC Controller');
        },
        link: function () {
            console.log('childC Link');
        }
    };
});

child-A-template.html：

A<child-b-drtv></child-b-drtv>

子-B-template.html：

B<child-c-drtv></child-c-drtv>

子-C-template.html：

输出：

childA Controller
childA Link
childB Controller
childB Link
childC Controller
childC Link

当您使用'template'替换'templateUrl'时，您将获得不同的输出。 app.js：

var app = angular.module('app', []);
app.directive('childADrtv', function () {
    return {
        restrict: 'E',
        //templateUrl: 'child-A-template.html',
        template: 'A<child-b-drtv></child-b-drtv>',
        controller: function ($scope) {
            console.log('childA Controller');
        },
        link: function () {
            console.log('childA Link');
        }
    };
})

app.directive('childBDrtv', function () {
    return {
        restrict: 'E',
        //templateUrl: 'child-B-template.html',
        template: 'B<child-c-drtv></child-c-drtv>',
        controller: function ($scope) {
            console.log('childB Controller');
        },
        link: function () {
            console.log('childB Link');
        }
    };
})

app.directive('childCDrtv', function () {
    return {
        restrict: 'E',
        //templateUrl: 'child-C-template.html',
        template: 'C',
        controller: function ($scope) {
            console.log('childC Controller');
        },
        link: function () {
            console.log('childC Link');
        }
    };
});

输出：

childA Controller
childB Controller
childC Controller
childC Link
childB Link
childA Link

Answer 1

如果你转到link，你会发现以下内容。我认为它解释了你的输出

<强> templateUrl

这与模板类似，但模板是从指定的URL异步加载的。

因为模板加载是异步的，所以编译器将挂起关于该元素的指令的编译，以供以后在模板中使用已经解决了。与此同时，它将继续编译和链接兄弟元素和父元素，就好像这个元素没有包含任何指令。编译器不会挂起整个编译等待加载模板，因为这样导致整个应用程序“停止”，直到加载所有模板异步 - 即使在只有一个深度嵌套的情况下指令有templateUrl。

即使模板已预先加载到$ templateCache

中，模板加载也是异步的

因此，对于使用templateUrl的情况，angular会异步调用templateUrl，这意味着它会执行自己的链接函数。

但是在使用模板时，则不需要任何异步调用。 Angular开始立即编译模板并调用下一个指令控制器。当它到达最后一个指令时，它通过调用从C到A的链接函数返回。

AngularJS - 如何解释输出

1 个答案: