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>
我正在开发一个需要在每个页面上都有相同指令的应用程序。 不幸的是,它没有按预期工作。
假设我打开应用程序并访问 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>