ディレクティブ内のtemplateとtemplateUrlの違い

私は1.5.3でコーディングしていました。これはコードです：ディレクティブ内のtemplateとtemplateUrlの違い

app.js機能createDirectiveで

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>

、コメントアウト// 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...

など、すべてコメントアウトする場合：

を

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

、「ポストリンクを」「prelinkの」「をコンパイル」の順序は、私は上記のようにいくつかのコードをコメントアウトするときに変更：

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

は、ここでのログです。

これはどうしてですか？ templateとtemplateUrlの違いを説明できますか？transcludeを使用するか、transcludeをディレクティブに使用しないかの違いはありますか？ありがとうございました。ドキュメントから

出典

2017-08-17 timShadow

：

templateUrl

これはtemplateに似ていますが、テンプレートが非同期で、指定されたURLからロードされます。

テンプレート読み込みが非同期であるため、コンパイラは、テンプレートが解決されたときに後でその要素のディレクティブのコンパイルを中断します。その間、この要素にはディレクティブが含まれていないかのように、兄弟要素と親要素をコンパイルしてリンクし続けます。

コンパイラは、テンプレートがロードされるのを待つためにコンパイル全体を中断しません。深いネストされたディレクティブのいずれかがtemplateUrlの場合でも、すべてのテンプレートが非同期に読み込まれるまでアプリケーション全体が「停止」することになります。

— AngularJS Comprehensive Directive API Reference - templateUrl

出典

2017-08-17 04:33:03 georgeawg

だから、どのコンテナ他のディレクティブディレクティブでtemplateUrlを使用unrecoment方法は何ですか？ – timShadow

ディレクティブ内のtemplateとtemplateUrlの違い

答えて

templateUrl

関連する問題