Angular Directive cannot access scope

Question

I'm not well experienced in angular js and your help desperately!

I'm trying to create a tab navigation for angular based website.

Here is my html:

<body ng-app = "app">
    <div class="bottom-content-container">
        <form class = "tab-nav">
            <tab-nav nav = "popular"></tab-nav>
            <tab-nav nav = "recent"></tab-nav>
        </form>

        <div class="tab-content" ng-switch = "tab">
            <div ng-switch-when = "popular">
                Popular Images
            </div>
            <div ng-switch-when = "recent">
                Recent Images
            </div>
        </div>
    </div>
  </body>

And here is the js:

var app = angular.module('app', []);

app.directive('tabNav', function () {
  return {
    template : '<label> <input type="radio" ng-model="tab" value="{{nav}}" name = "tabnav" /><span>{{nav}}</span></label>',
    replace:true,
    scope:{
      nav: '@'
    }
  };
});

The thing probably is that I'm messing up the scopes, and the directive is not changing the "tab" variable, so nothing happens.

Here is the jsbin

Thanks in advance!

Very good question, I am having the same problem .. waiting for the answer :s — Salome Tsiramua
– Salome Tsiramua, Commented May 5, 2016 at 14:46
I think you want to change value="{{nav}}" to value="{{tab}}" because you model is tab. — victor sosa
– victor sosa, Commented May 5, 2016 at 15:00

Alberto · Accepted Answer · 2016-05-05 15:01:16Z

2

I've made a jsbin.

In the directive scope @ is used to bind to attributes, as your directive should set a selected value that will be read from outside you need to use =. Then I wrap everything insde a ctrl to hold this selected value so your content can use it to display the tabs.

answered May 5, 2016 at 15:01

Alberto

1291 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

MayaLekova Over a year ago

You're making a redundant copy of the parent's scope value with this part: tab="vm.selectedTab"

Alberto Over a year ago

What do you mean? Please can you be more concise. I know that it's not the most optimal solution

MayaLekova Over a year ago

I'm not exactly sure how passing "tab" into the directive and declaring it with "=" both work (IMO only one of them should be used), but your solution involves copying the value from the parent scope and making a separate one in the isolated scope. I could be mistaken of course, it's best to check with some debugger like ng-inspector: chrome.google.com/webstore/detail/ng-inspector-for-angularj

MayaLekova Over a year ago

The same check as in the other solutions points to this: "tab === $parent.tab" inside the directive evaluates to true.

Alberto Over a year ago

I don't think that accessing $parent is a good approach, the purpose of directives is code reuse and accesing parents it's not a good apprach, because you don't know if later parent will change.

|

gogachinchaladze · Accepted Answer · 2016-05-05 15:05:48Z

0

JSBIN

I found a solution ! Don't know what's the negative sides of it, but works fine !

I'm passing the tab to tab-nav and works nice (y)

answered May 5, 2016 at 15:05

gogachinchaladze

1,0741 gold badge9 silver badges19 bronze badges

3 Comments

MayaLekova Over a year ago

If I'm not mistaken, you're making a copy of the "tab" value in the child's scope and not using the parent one.

gogachinchaladze Over a year ago

Then why does the parent change on nav click?

MayaLekova Over a year ago

Because it's a reference to the same object. Inside the directive the following returns true: "tab === $parent.tab"

Mohsin Muzawar · Accepted Answer · 2016-05-05 15:08:29Z

0

<tab-nav ng-click="tab='popular'" nav = "popular"></tab-nav>
  <tab-nav ng-click="tab='recent'" nav = "recent"></tab-nav>

answered May 5, 2016 at 15:08

Mohsin Muzawar

1,2129 silver badges9 bronze badges

Comments

MayaLekova · Accepted Answer · 2016-05-05 15:11:49Z

0

Another solution is to use $parent:

app.directive('tabNav', function () {
  return {
    template : '<label> <input type="radio" ng-model="$parent.tab" value="{{nav}}" name = "tabnav" /><span>{{nav}}</span></label>',
    replace:true,
    scope:{
      nav: '@',
      tab : '='
    }
  };
});

Also notice how the value property is bound.

answered May 5, 2016 at 15:11

MayaLekova

5503 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular Directive cannot access scope

4 Answers 4

6 Comments

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

3 Comments

Comments

Comments

Related