決定何時在鏈接功能中使用AngularJS指令的'templateUrl'

Question

是否可以決定是否在AngularJS指令的鏈接功能中使用templateUrl參數？

假設我有以下指令：

app.directive('sitesAndImprovements', function() { 
    return { 
     restrict: 'E', 
     replace:true, 
     templateUrl: '<path-to-file>/site-and-improvments.html', 
     link: function (scope, elem, attrs) { 
      scope.testClick = function() { 
       var myScope = scope; 
       //debugger; 
      } 
      scope.constructionCompleteClick = function() { 
       if (scope.construction_complete == 'Yes') { 
        scope.hold_back = ''; 
        scope.percent_complete = 100; 
       } else 
       if (scope.construction_complete == 'No') { 
        scope.hold_back = '1'; 
        if (scope.percent_complete == 100) { 
         scope.percent_complete = ''; 
        } 
       } 
      } 
      scope.calcTotal = function() { 
       var total; 
       total = (scope.main || 0) + (scope.second || 0) + (scope.third || 0) + (scope.fourth || 0); 
       scope.total = total || null; 
      } 
     } 
    } 
}) 

我想控制是否使用與否在link()功能使用templateUrl，也是replace參數。

這是因爲我已經在大約10多個地方實現了這個指令，而沒有使用templateUrl，現在我想開始使用這個功能，但是我不想對現有代碼和工作代碼進行更改。

這是可能的和如何？

塔裏克

Answer 1

我不認爲你可以做的是，在link，但我相信你可以把templateUrl成可以用於指令返回不同值的函數。

嘗試做這樣的事情你templateUrl：

templateUrl: function() { 
    if (someCondition) { 
     return '<path-to-file>/site-and-improvments.html'; 
    } else { 
     return null; 
    } 
}, 

Answer 2

app.directive('sitesAndImprovements', function() { 
    return { 
     restrict: 'E', 
     replace:function(){ 
      if (aCondition){ 
       return true; 
      } else { 
       return false; 
      } 
     }, 
     templateUrl: function(){ 
      if (aCondition){ 
       return '<path-to-file>/site-and-improvments.html'; 
      } else { 
       return undefined; 
      } 
     }, 
     link: function (scope, elem, attrs) { 
      scope.testClick = function() { 
       var myScope = scope; 
       //debugger; 
      } 
      scope.constructionCompleteClick = function() { 
       if (scope.construction_complete == 'Yes') { 
        scope.hold_back = ''; 
        scope.percent_complete = 100; 
       } else 
       if (scope.construction_complete == 'No') { 
        scope.hold_back = '1'; 
        if (scope.percent_complete == 100) { 
         scope.percent_complete = ''; 
        } 
       } 
      } 
      scope.calcTotal = function() { 
       var total; 
       total = (scope.main || 0) + (scope.second || 0) + (scope.third || 0) + (scope.fourth || 0); 
       scope.total = total || null; 
      } 
     } 
    } 
}) 

說明：如the source code指出，該模板將只有templateUrl給出編譯：

... 
    if (directive.templateUrl) { 
       hasTemplate = true; 
       assertNoDuplicate('template', templateDirective, directive, $compileNode); 
       templateDirective = directive; 

       if (directive.replace) { 
       replaceDirective = directive; 
       } 

       // eslint-disable-next-line no-func-assign 
       nodeLinkFn = compileTemplateUrl(directives.splice(i, directives.length - i), $compileNode, 
... 

請，請注意0​​可能是傳遞給指令以啓用/禁用templateUrl和替換的屬性。另外請記住，replaceis deprecated。