templateUrl

Question

当我用1.5.3角编码时。这是代码：

app.js

var testApp = angular.module('test-app', ['plugin.template']);

testApp.run(function ($rootScope) {

});

createDirective('directiveOne');
createDirective('directiveTwo');
createDirective('directiveThree');

function createDirective(name) {
  testApp.directive(name, function () {
    return {
      template: '<div>Hello<div ng-transclude></div></div>',
      // templateUrl: 'template.html',
      transclude: true,
      replace: true,
      compile: function (element, attr) {
        console.log(name + '指令的compile...');
        return {
          post: function (iScope, iElm, iAttr, ctrl) {
            console.log(name + '指令的postlink...');
          },
          pre: function () {
            console.log(name + '指令的prelink...');
          }
        }
      }
    }
  });

}

插件-template.js

(function (app) {
  try {
    app = angular.module("plugin.template");
  }
  catch (err) {
    app = angular.module("plugin.template", []);
  }
  app.run(["$templateCache", function ($templateCache) {
    "use strict";

    $templateCache.put("template.html", "<div>hello<div ng-transclude></div></div>");
  }]);
})();

的index.html

<!DOCTYPE html>
<html lang="zh" ng-app="test-app">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, minimum-scale=1.0,initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <script src="../dist/js/angular/angular.js"></script>
    <script src="plugin-template.js"></script>
    <script src="app.js"></script>
</head>
<body>

<directive-one>
    <directive-two>
        <directive-three>

        </directive-three>
    </directive-two>
</directive-one>

</body>
</html>

在功能createDirective中，注释掉// templateUrl: 'template.html',。

      template: '<div>Hello<div ng-transclude></div></div>',
      // templateUrl: 'template.html',
      transclude: true,
      replace: true,

这是日志：

directiveOne指令的compile...
directiveOne指令的prelink...
directiveTwo指令的compile...
directiveTwo指令的prelink...
directiveThree指令的compile...
directiveThree指令的prelink...
directiveThree指令的postlink...
directiveTwo指令的postlink...
directiveOne指令的postlink...

注释掉// template: '<div>Hello<div ng-transclude></div></div>',

时

      // template: '<div>Hello<div ng-transclude></div></div>',
      templateUrl: 'template.html',
      transclude: true,
      replace: true,

这是日志：

directiveOne指令的compile...
directiveOne指令的prelink...
directiveOne指令的postlink...
directiveTwo指令的compile...
directiveTwo指令的prelink...
directiveTwo指令的postlink...
directiveThree指令的compile...
directiveThree指令的prelink...
directiveThree指令的postlink...

将所有评论全部注释为：

// template: '<div>Hello<div ng-transclude></div></div>',
// templateUrl: 'template.html',
// transclude: true,
// replace: true,

这是日志：

directiveOne指令的compile...
directiveTwo指令的compile...
directiveThree指令的compile...
directiveOne指令的prelink...
directiveTwo指令的prelink...
directiveThree指令的prelink...
directiveThree指令的postlink...
directiveTwo指令的postlink...
directiveOne指令的postlink...

＆＃39;编译＆＃39;，＆＃39; prelink＆＃39;的顺序＆＃39; postlink＆＃39;当我注释掉上面的一些代码时改变了。

为什么会这样？你能解释一下模板和templateUrl之间的区别，以及使用transclude和不使用transclude在指令中的不同吗？非常感谢。

Answer 1

来自文档：

templateUrl

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

因为模板加载是异步的，所以编译器将暂停对该元素的指令编译，以便以后在解析模板时使用。与此同时，它将继续编译和链接兄弟元素和父元素，就像这个元素没有包含任何指令一样。

编译器不会挂起整个编译以等待加载模板，因为这会导致整个应用程序停止＆＃34;直到所有模板都异步加载 - 即使只有一个深层嵌套的指令有templateUrl。

— AngularJS Comprehensive Directive API Reference - templateUrl

模板和指令中的templateUrl之间有所不同

1 个答案:

templateUrl