TL; DR：
在指令的templateUrl方法中使用attr值,在使用子指令時(shí)尚未插入attr.最終結(jié)果是文字{{attrName}} / something.html.

全文：
我有一個(gè)外部指令,其中包含內(nèi)部指令.訣竅是,這些內(nèi)部指令也是可以在不知道父母的情況下自己生活的項(xiàng)目.

規(guī)則很簡(jiǎn)單：

>如果項(xiàng)目單獨(dú)使用,則必須通過(guò)屬性將其配置傳遞給它.
>如果某個(gè)項(xiàng)目由其父項(xiàng)包含,則必須通過(guò)parents屬性將其配置傳遞給它
>我無(wú)法將完整的組合HTML寫(xiě)入index.html.它必須在運(yùn)行中加載.他們是規(guī)則.但是,這樣做可以解決問(wèn)題.
> URL必須是動(dòng)態(tài)的,并且父級(jí)必須能夠傳遞此信息而不依賴(lài)于范圍繼承 – 父級(jí)可能不在那里.
>第三方網(wǎng)站無(wú)法告訴我在哪里使用JS指出這些.他們唯一的工具是index.html中的HTML.屬性配置很好.

index.html的：

<div zoo feeding-time="8am" template-base="/templates"></div>

OR – index.html也可以是：gorilla可以明確指定attr值,因?yàn)樗皇抢^承的

<div gorilla template-base-url="/templates"></div> 

Zoo.html – 它將自己的配置傳遞給gorilla

<div gorilla template-base-url="{{templateBaseUrl}}"></div>

動(dòng)物園directive.js

angular.module("app").directive("zoo", [function() {
        return {
            restrict: "A",
            scope: true,
            templateUrl: function(element, attrs) {

                // THIS ONE NEVER FAILS BECAUSE ITS NEVER INTERPOLATED

                var base = attrs.templateBaseUrl;
                return base   "/zoo.html";
            },
            link: function(scope, element, attrs) {
                // its my job to give gorilla a templateURL in this case
                scope.templateBaseUrl = attrs.templateBaseUrl;
            }
        };
    }]);

gorilla.html

angular.module("app").directive("gorilla", [function() {
        return {
            restrict: "A",
            scope: true,
            templateUrl: function(element, attrs) {

                // THIS ONLY FAILS WHEN INCLUDED BY ZOO.HTML
                // AND THEN, ONLY SOMETIMES.  RACE CONDITION?  PRIORITY?

                // DOES NOT FAIL WHEN INCLUDED BY INDEX.HTML DIRECTLY

                var base = attrs.templateBaseUrl;
                return base   "/gorilla.html";
            }
        };
    }]);

這有效.有時(shí).有時(shí),tempateUrl方法使用文字{{templateBaseUrl}}.我只能跟蹤它,只要看到當(dāng)gorilla的templateUrl方法使用attrs.templateBaseUrl時(shí),attrs.templateBaseUrl它還沒(méi)有被插值.

因此,gorilla.link()在插入{{templateBaseUrl}}和kaboom之前運(yùn)行. 404在“{{templateBaseUrl}} / gorilla.html”

我怎么能避免這個(gè)？

https://docs./error/ $編譯/ tpload？P0 = {{templateBaseUrl}} / gorilla.html

我在每個(gè)項(xiàng)目依賴(lài)的提供程序中都有這個(gè)baseUrl東西,但它與此簡(jiǎn)化版本具有相同的效果.它必須是解析訂單問(wèn)題.

解決方法:

為什么？

您的方法失敗,因?yàn)閠emplateUrl函數(shù)必須在控制器的“編譯”階段之前運(yùn)行(如果您還沒(méi)有編譯模板,則無(wú)法編譯模板).使用嵌套指令,首先運(yùn)行所有編譯函數(shù),然后運(yùn)行鏈接函數(shù).我發(fā)現(xiàn)下面的圖表可以作為“使用嵌套指令時(shí)運(yùn)行時(shí)什么時(shí)候”的參考 – 它來(lái)自一個(gè)相當(dāng)in depth article的主題 – 一個(gè)很好的閱讀.

http://www./content/images/2014/Aug/cycle-2.png

考慮到這一點(diǎn),很明顯當(dāng)你的gorilla指令正在編譯時(shí),動(dòng)物園的鏈接功能還沒(méi)有運(yùn)行,這意味著范圍值甚至沒(méi)有被設(shè)置,更不用說(shuō)內(nèi)插到屬性中了.

如何避免它

看起來(lái)你將不得不自己獲取和編譯模板.您可以使用angular的$templateRequest來(lái)確保模板正確緩存.我們可以通過(guò)僅使用范圍中的值來(lái)避免插值是否已經(jīng)發(fā)生(我使用了隔離范圍,因?yàn)樗故虑樽兊貌荒敲茨：?并且通常是更好的實(shí)踐,但如果你想要,你可以只使用范圍繼承).

免責(zé)聲明：以下代碼是在沒(méi)有運(yùn)行的情況下編寫(xiě)的,肯定會(huì)包含拼寫(xiě)錯(cuò)誤和錯(cuò)誤！希望你會(huì)看到邏輯……

子指令代碼：

angular.module("app")
.directive("gorilla", function($templateRequest, $compile) {
  return {
    restrict: "A",
    // set up an isolate scope
    scope: {
      tplBaseUrl: '='
    },
    link: {

      pre: function (scope, elem, attr) {
        // Decide if the url is directly set or is dynamic
        var baseUrl = scope.tplBaseUrl ? scope.tplBaseUrl : attr.tplBaseUrl;
        // request the template
        $templateRequest(baseUrl   '/gorilla.html')
        .then(function (response) { 
          tpl = response.data;
          // compile the html, then link it to the scope
          $elem = $compile(tpl)(scope);
          // append the compiled template inside the element
          elem.append($elem);
        });
      },

      post: function (scope, elem, attr){
        // you can put your normal link function code in here.
      }
    }
  };
});

請(qǐng)注意,預(yù)鏈接函數(shù)的第一行實(shí)質(zhì)上是檢查是否存在使用您傳遞的名稱(chēng)設(shè)置的范圍變量,如果沒(méi)有,則假定您已經(jīng)為其指定了url字符串(因此使用屬性值).這可能不是最好的方法 – 我很想使用兩個(gè)不同的屬性,但這取決于你.

重要的是(再次參考圖表！),您的父(zoo)指令必須在其預(yù)鏈接函數(shù)中設(shè)置模板庫(kù)的值,否則當(dāng)子指令運(yùn)行的鏈接函數(shù)運(yùn)行時(shí),該值將是未定義的.

(簡(jiǎn)體)父指令：

你可以在這里使用類(lèi)似于child指令,或者使用你原來(lái)的方法.此代碼已簡(jiǎn)化,以提供在預(yù)鏈接期間如何設(shè)置tplBaseUrl的示例.

angular.module("app")
.directive("zoo", function() {
  return {
    restrict: "A",
    template: '<div gorilla tpl-base-url="tplBaseUrl"></div>',
    link: {
      pre: function (scope, elem, attr) {
        // make sure it is set here!
        scope.tplBaseUrl = "/templates";
      },
      post: function (scope, elem, attr){
        // link logic
      }
    }
  };
});

最后,如果您要靜態(tài)設(shè)置它,這也應(yīng)該有效：

<div gorilla template-base-url="/templates"></div>