Angular directive scope value

Question

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

As you can see i have a directive named tab, and this tab have an attribute page,

i need to change the templateUrl based on the value of page attribute

if the page value is page="abc" then the templateUrl should be templateUrl: 'tab/abc.html',

here is my directive code

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

is this logically possible..? or any alternative methode to done this..?

Try with page: '=' instead of page: '@', that will allow you to immediately use the attribute value inside link. — Mohit Tanwani, Sep 28 '16 at 06:18

score 7 · Accepted Answer · answered Sep 28 '16 at 06:15

7

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

answered Sep 28 '16 at 06:15

Suresh Gogu

329
4
12

Thanks it solve my problem , but i have no idea where the varibale elem,attrs came from , – Sajan Sep 28 '16 at 06:39
element is where the directive was called and attribute is object associated with that element. For reference you can also check https://docs.angularjs.org/guide/directive – Suresh Gogu Sep 28 '16 at 06:47

score 2 · Answer 2 · answered Sep 28 '16 at 06:22

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

You are isolating scope for tab directive and you have a binding

 scope: {
          page: '@',
     }

if your are passing just a string on parent scope to directive then use

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

but if you want to pass an object from parent scope to directive then

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

then in your directive

  scope: {
              page: '=',
         }

Angular directive scope value

2 Answers2