javascript - Angular : get Template URL from parent directive

Question

我知道我可以根据选项 DOM 属性动态设置 templateUrl template-url="foo.html"给定以下代码:

angular.module('foo').directive('parent', function() {
   return {
       restrict: 'E',
       link: function(scope, element, attrs) {
           // code
       },
       templateUrl: function(elem,attrs) {
           return attrs.templateUrl || 'some/path/default.html'
       }
   }
});

但是，我需要更进一步，将这个字符串更深一层传递给子指令。

给定这个 HTML:

在主项目中的使用

<parent parent-template="bar.html" child-template="foo.html"></parent>

大多数情况下 child 不会暴露，所以如果child-template已设置，它需要隐式替换 templateUrl对于所有 child <child></child>位于父元素中的元素 foo.html .

require: '^parent'属性将数据从一个范围传递到另一个范围，但我在 templateUrl 中看不到它可用宣布时。

foo.html

<h1>Title</h1>
<child ng-repeat="item in array"></child>

指令

angular.module('foo').directive('parent', function() {
   return {
       restrict: 'E',
       link: function(scope, element, attrs) {
           // code
       },
       templateUrl: function(elem,attrs) {
           return attrs.parentTemplate || 'some/path/default.html'
       },
       scope: {
          childTemplate: '=childTemplate'
       }
   }
})
.directive('child', function() {
   return {
       restrict: 'E',
       link: function(scope, element, attrs) {
           // code
       },
       templateUrl: function(elem,attrs) {
           return ??? // parent.attribute.childTemplate? || 'some/path/default.html'
       },
       require: '^parent',
       scope: {
          childTemplate: '=childTemplate'
       }
   }
});

Answer 1

更新

旧的答案(见下文)将不起作用，因为它只能在 link 函数中访问所需指令的 Controller ，并且 templateUrl 函数获取在 link 函数之前执行。

因此，解决此问题的唯一方法是处理子指令的 templateUrl 函数中的所有内容。然而this function only takes 2 arguments: tElement and tArgs .

因此，我们必须找到父指令的元素并访问属性child-template。像这样:

angular.module('testApp', [])
.directive('parent', function() {
   return {
       restrict: 'E',
       link: function(scope, element, attrs) {
       },
       transclude:true, 
       templateUrl: function(elem,attrs) {
           return attrs.parentTemplate || 'default.html'
       }
   }
})
.directive('child', function() { 
   return {
       restrict: 'E',
       require:'^parent',
       templateUrl: function(elem,attrs) {
           //if jQuery is loaded the elem will be a jQuery element, so we can use the function "closest"
           if(elem.closest) 
              return elem.closest("parent").attr("child-template") || 'default.html';

           //if jQuery isn't loaded we will have to do it manually
           var parentDirectiveElem=elem; 
           do{
             parentDirectiveElem=parentDirectiveElem.parent();
           }while(parentDirectiveElem.length>0 && parentDirectiveElem[0].tagName.toUpperCase()!="PARENT");
           return parentDirectiveElem.attr("child-template") || 'default.html'; 
       }
   }
});

Example

旧答案

由于您正在隔离作用域，您可以试试这个，它有点老套，但我想它应该可以工作:

angular.module('foo').directive('parent', function() {
   return {
       restrict: 'E',
       controller:  function($scope) {
           this.childTemplate=$scope.childTemplate;
       },
       link: function(scope, element, attrs) {

       },       
       templateUrl: function(elem,attrs) {
           return attrs.parentTemplate || 'some/path/default.html'
       },
       scope: {
          childTemplate: '@'
       }
   }
})
.directive('child', function() {
   return {
       restrict: 'E',
       require: '^parent',
       link: function(scope, element, attrs, parentController) {
           if(parentController.childTemplate)
               element.data("childTemplate", parentController.childTemplate);
       },
       templateUrl: function(elem,attrs) {
           return elem.data("childTemplate") || 'some/path/default.html'
       }
   }
});