Угловой директива значение сферы

Question

<tab page="book"> </tab> 
    <tab page="dial"> </tab> 
    <tab page="groupe"> </tab> 
    <tab page="log"> </tab> 
    <tab page="star"> </tab> 

Как вы можете видеть, у меня есть директива под названием вкладки и это вкладки имеют атрибут страницу,

мне нужно изменить templateUrl на основе значение страницы атрибут

если страница значение page="abc" то templateUrl должен быть templateUrl: 'tab/abc.html',

здесь моя директива код

contactBook.directive('tab', function() { 
    let m = 'tab/default.html'; 
    return { 
     restrict: 'E', 
     scope: { 
      page: '@', 
     }, 
     templateUrl: m, 
     link: function(scope, element, attributes) { 
      m = "tab/" + scope.page + ".html";  
     }, 
    }; 
}); 

это логически возможно ..? или любой альтернативный метод, чтобы сделать это ..?

Answer 1

templateUrl: function(elem,attrs) { 
    return "tab/" + attrs.page + ".html" || 'tab/default.html'; 
}, 

Answer 2

contactBook.directive('tab', function() { 
    let m = 'tab/default.html'; 
    return { 
     restrict: 'E', 
     scope: { 
      page: '@', 
     }, 
     templateUrl: m, 
     link: function(element, attributes) { 
      m = "tab/" + attributes.page + ".html"; // attributes.page can access attribute value 
     }, 
    }; 
}); 

Вы изолируют область для вкладок директивы и вы привязки

scope: { 
      page: '@', 
    } 

если ваш проезжают только в string на родительской области директиве затем использовать

<tab page={{book}}> </tab> 

но если вы хотите передать объект из родительской области в директиву, то

<tab page="book"> </tab> 

то в вашей директиве

scope: { 
       page: '=', 
     }