0

我正在开发一个使用大量 JQuery 的网站,并将其转换为对角度更友好的设计。这是一个plunker,代表原始网站。如果您运行它并单击“布局”菜单项,请注意子菜单项折叠和展开。

如果我从菜单创建模板 html 文件并使用 nginclude,突然展开和折叠不起作用。这是一个笨蛋

有人可以解释为什么吗?

<div data-ng-include="" src="'menuFull.tpl.html'" onload="OnTemplateLoaded()" data-ng-controller="MenuCtrl"></div>

我能想到的只是 App.Init 在 nginclude 嵌入页面之前被调用,因此,一些 jQuery.on 没有得到连接?任何人都看到任何使用 nginclude 的方法,但仍然让它展开/折叠?

谢谢,丹

4

1 回答 1

1

Whats going wrong

Whats happening here is that the markup inside you include is not being updated by your App.init(). In your first example all the markup is present when you call init. All the work that needs to be done to "activate" your menus and bind the correct events to them works correctly.

In your second example the controller has updated the markup with the include template and run the controller to fill in the bindings. This is inserted into the page after you have called init at the bottom of the page. So the event bindings to make the menu show up are not present.

The fix

If you call App.init() inside your OnTemplateLoaded() function in the controller then you will see that the menu now works.

Some things to note:

First EVERY time your controller data syncs it replaces the template and you will have to rebind the events to the markup in your include.

Second is that App.init() targets the entire page. When rebinding or binding for a specific template or feature in your template you should use a selector that will target just that.

Lastly, if the data that your using in your controller is not going to be updated after its rendered, eg your just pulling the menu contents from the server and they don't change. You can fine tune your document load actions to work around this. So, choose to register the documents events though only Angular or jQuery, then define the order of execution. In that call bind your angular module to the page and afterward call App.init();

于 2013-09-13T15:44:16.557 回答