2017-07-27 63 views
0

是否可以决定是否在AngularJS指令的链接功能中使用templateUrl参数?决定何时在链接功能中使用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,现在我想开始使用这个功能,但是我不想对现有代码和工作代码进行更改。

这是可能的和如何?

塔里克

回答

0

我不认为你可以做的是,在link,但我相信你可以把templateUrl成可以用于指令返回不同值的函数。

尝试做这样的事情你templateUrl

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

相关问题