angularjs - unable to call same directive from different pages

Question

I'm working on an app that needs to have the same directive on each page. Unfortunately, it is not working as expected.

Let's say I open the app and visit page with ID=1

The page with ID=1 loads, I click on the directive, and everything works as expected.

Now, I change page and I go to page with ID=2

Like before, the page loads and I click on 'directive' but nothing happens.

If now I go back to page with ID=1, the directive is opened in that page.

Basically, I thought that changing page was enough for the directive to be re-rendered on the new page, but apparently it is not.

index.html:

<my-directive></my-directive>

directive.coffee:

angular.module('myApp', [ 'ionic' ]).directive 'myDirective', ->
  {
  restrict: 'E'
  scope:
    mode: '@mode'
  replace: true
  templateUrl: 'templates/template.html'
  }

I've created a pen here: http://codepen.io/anon/pen/Xdqrve?editors=1010

Any help?

Answer 1

You problem with similar checkbox name and label for values.

You have to change mode parameter like this:

<mode-selector mode="1"></mode-selector> <mode-selector mode="2"></mode-selector> <mode-selector mode="3"></mode-selector>

And append mode at checkbox name & label id:

<input type="checkbox" href="#" class="menu-open" name="menu-open-{{mode}}" id="menu-open-{{mode}}"/>
<label class="menu-open-button" for="menu-open-{{mode}}">
    <i class="zone-details-current-mode icon-mode-{{mode}}"></i>
    <span class="hamburger hamburger-1"></span>
    <span class="hamburger hamburger-2"></span>
    <span class="hamburger hamburger-3"></span>
</label>