Entscheiden Sie, wann 'TemplateUrl' der AngularJS-Direktive in der Link-Funktion

Question

Ist es möglich zu entscheiden, ob templateUrl Parameter in der Link-Funktion der AngularJS-Direktive zu verwenden?

Angenommen, ich habe die folgende Anweisung:

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

Ich mag kontrollieren, ob die Verwendung zu verwenden oder nicht, die templateUrl und auch die replace Parameter in der link() Funktion.

Dies liegt daran, dass ich diese Direktive bereits an über 10 Orten ohne Verwendung von templateUrl implementiert habe und jetzt möchte ich diese Funktion verwenden, aber ich möchte keine Änderungen am bestehenden und funktionierenden Code vornehmen.

Ist das möglich und wie?

Tarek

Answer 1

Ich glaube nicht, dass Sie in der link tun können, aber ich glaube, Sie templateUrl in eine Funktion drehen können, die unterschiedliche Werte für die Richtlinie zurückkehren können.

Versuch Ihre templateUrl so etwas wie dies zu tun:

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

Erläuterung: Wie in the source code angegeben, wird die Vorlage nur kompiliert werden, wenn templateUrl gegeben:

... 
    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, 
... 

Bitte, Beachten Sie, dass aCondition ein Attribut sein kann, das an die Direktive übergeben wird, um templateUrl und replace zu aktivieren/deaktivieren. Denken Sie auch daran, dass die replaceis deprecated.