Javascript 使用 angular ui 路由器加载部分内容后主页丢失

Question

更新

我正在考虑使用 following solution，这是一个好方法吗？

我正在开发一个从 wordpress 移植到 angularJS 的项目（稍后会有自己的后端）。一些已经存在的必需 javascript 文件必须保留。

我正在使用 angular ui router 来保留之前的路线，并根据图书馆的要求设置状态。

这是我的问题，我在主 'index.html' 中加载了以下文件：

<script type='text/javascript' src='/wp-content/themes/twentyfourteen-child/assets/js/bootstrap.min0c54.js?ver=150923'></script>
<script type='text/javascript' src='/wp-content/themes/twentyfourteen-child/assets/js/svg-injector-min5b31.js?ver=4.3.1'></script>
<script type='text/javascript' src='/wp-content/themes/twentyfourteen-child/assets/js/bootstrap-select.min0c54.js?ver=150923'></script>
<script type='text/javascript' src='/wp-content/themes/twentyfourteen-child/assets/js/jquery.matchHeight.min0c54.js?ver=150923'></script>
<script type='text/javascript' src='/wp-content/themes/twentyfourteen-child/assets/js/imgw-mina8b3.js?ver=150526'></script>
<script type='text/javascript-lazy' src='/wp-content/themes/twentyfourteen-child/assets/js/jquery-cycle2.min0c54.js?ver=150923'></script>
<script type='text/javascript-lazy' src='/wp-content/themes/twentyfourteen-child/assets/js/scrollTo.min0c54.js?ver=150923'></script>
<script type='text/javascript-lazy' src='/wp-content/themes/twentyfourteen-child/assets/js/imgw_home_scripts-min0c54.js?ver=150923'></script>

需要这些文件。现在，当我路由到特定的 url 时，例如：

/a-new-url

指向模板：

/partial/a-new-url.html

例如，此模板有一个使用这些 javascript 文件之一的轮播，但是轮播不再工作，除非我将脚本标签 复制并粘贴到部分 。现在这是一个糟糕的解决方案，并且会导致冗余，因为我将不得不对每个不同的部分执行此操作。

处理和解决此问题的正确方法是什么？

轮播代码（根据要求）

in index.html body 标签中有以下文件:

<script type='text/javascript-lazy' src='/wp-content/themes/twentyfourteen-child/assets/js/jquery-cycle2.min0c54.js?ver=150923'></script>
<script type='text/javascript-lazy' src='/wp-content/themes/twentyfourteen-child/assets/js/scrollTo.min0c54.js?ver=150923'></script>
<script type='text/javascript-lazy' src='/wp-content/themes/twentyfourteen-child/assets/js/imgw_home_scripts-min0c54.js?ver=150923'></script>

我的调查显示 html 是根据 "id=home-slideshow"

自动加载的

<div id="home-slideshow">
  <div id="slides" class="home-slider">
    <div class="slide" style="background-image: url(/wp-content/uploads/2014/05/home.jpg);">
    </div>
    <div class="slide" style="background-image: url(/wp-content/uploads/2014/05/1170780.jpg);">
    </div>
    <div class="slide" style="background-image: url(/wp-content/uploads/2014/05/ep.jpg);">
    </div>
  </div>
</div>

Answer 1

我最终使用了 following solution，这对我来说已经足够了。

使用指令可能更好，但在我的场景中，它可以完成工作。

Javascript 使用 angular ui 路由器加载部分内容后主页丢失

Javascript from main page lost after loading partial using angular ui router

jquery

partial-views

conflicting-libraries

angularjs

angular-ui-router

更新

轮播代码（根据要求）