AngularJS - 如何解釋輸出

在angularjs指令中'template'和'templateUrl'有什麼不同？AngularJS - 如何解釋輸出

的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'); 
     } 
    }; 
});

孩子-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

當您使用 '模板' 來代替 '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

來源

2015-11-26 Yongjian. Huang

'A '這就是你在'child-A- template.html'？ – Scorpion

您是否嘗試過幾次運行該程序？你確定它不是一個線程類型的問題嗎？ –

如果你去這link，你會發現以下內容。我認爲這說明你的輸出

templateUrl

這是類似的模板，但該模板從指定的網址下載，異步。

因爲模板加載是異步的編譯器將暫停編譯指令的該元素爲當模板已經解決了以後。在此期間，它將繼續編譯和鏈接兄弟和父元素，就好像這個元素沒有包含任何指令一樣。編譯器不會暫停整個編譯等待模板加載，因爲這將導致整個應用程序「停止」，直到所有模板異步加載 - 即使在只有一個深嵌套指令具有templateUrl的情況下。即使當您使用templateUrl，角度調用，templateUrl異步，意味着同時執行自己的鏈接功能的模板已預先加載到$ templateCache

因此，對於你的情況

模板加載是異步的。

但是，當您使用模板時，則不需要任何異步調用。角開始立即編譯您的模板，並調用下一個指令控制器。當它到達最後的指令時，它通過調用從C到A的鏈接函數返回。

來源

2015-11-26 05:15:56

AngularJS - 如何解釋輸出

回答

相關問題