angularjs - 无法从不同的页面调用相同的指令

angularjs - unable to call same directive from different pages

我正在开发一个需要在每个页面上都有相同指令的应用程序。 不幸的是,它没有按预期工作。

假设我打开应用程序并访问 ID=1

的页面

加载 ID=1 的页面,我点击指令,一切正常。

现在,我更改页面并转到 ID=2

的页面

和以前一样,页面加载,我点击 'directive' 但没有任何反应。

如果现在我返回到 ID=1 的页面,指令将在该页面中打开。

基本上,我认为更改页面足以让指令在新页面上重新呈现,但显然不是。

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'
  }

我在这里创建了一支笔:http://codepen.io/anon/pen/Xdqrve?editors=1010

有什么帮助吗?

您对相似的复选框 name 和标签 for 值有疑问。

您必须像这样更改 mode 参数:

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

并在复选框名称和标签 ID 处附加 mode

<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>