Javascript 如何让Angular.js与其他库一起工作？

我正在建一个水疗中心；我正处于合并路线/模板的位置。它大部分工作正常，但两个插件似乎不工作，我怀疑是由于我的集成

#1 当页面最初加载时，我的flexSlider工作正常。但当我点击返回flexslider页面时，滑块不会再次启动。控制台中没有错误

这是滑块实现：

 $(window).load(function() {
    $('.flexslider').flexslider({
        pauseOnHover: true,
        randomize: true,
        animation: "slide"

    });
});

这是我的角度文件脚本：

    var rustyApp = angular.module('rustyApp', [
        'ngRoute',
        'viewController'
    ]);

   rustyApp.config(['$routeProvider', function($routeProvider) {
     $routeProvider
         .when('/home', {
         templateUrl: 'partials/home.html',
         controller: 'HomeController'
     })
        .when('/work', {
         templateUrl: 'partials/work.html',
         controller: 'WorkController'
     })
        .when('/contact', {
        templateUrl: 'partials/contact.html',
        controller: 'ContactController'
     })
       .otherwise({
       redirectTo: '/home'
   })

  }]);

  var viewController = angular.module('viewController', []);


  rustyApp.controller('HomeController', function($scope) {});
  rustyApp.controller('WorkController', function($scope) {});
  rustyApp.controller('ContactController', function($scope) {});

#2我正在为手机使用非画布导航。当我点击相应页面的链接时，我会得到不同的模板/视图，但侧面板不会关闭

<aside class="left-off-canvas-menu">
    <ul class=" off-canvas-list">
        <li class="uk-active"><a href="#home"><i class="uk-icon-home"></i>home</a></li>
        <li><a href="#work"><i class="uk-icon-photo"></i> work</a></li>
        <li><a href="#contact"><i class="uk-icon-envelope-o"></i> contact</a></li>
    </ul>
</aside>

#3 正如您现在看到的，它显示的是

/#/home

，不应该是

index.html/home

---

提前感谢

AnJS是一种单页方法。因此，没有真正的页面重新加载。

/#/home

是正确的，它只是一种通过

锚定表达导航的AnJS方式

通常，如果您想与AnJS“world”/scope通信，必须通过$apply函数：

$rootScope.$apply（函数（）{/*此处的代码*/）}）

因为否则AnJS不会注意到你的变化

希望这会有所帮助。
您需要了解AngularJs的工作原理，通常需要了解AngularJs组件的生命周期。我正在尝试：

Q1。大多数情况下，Angular不能很好地与其他非Angular javascript文件配合使用。单击返回（或刷新）到另一页后，flexi代码无法工作的主要原因是AngularJs不知道flexi代码的存在

Angular的工作原理当你的HTML文件被加载（连同它必需的JS文件）时，Angular将开始启动，添加必需的观察程序，然后重新加载整个HTML文件。那么，为什么您的flexi代码无法工作？因为Angular从不观察它，因此从不消化它，因此它完全忽略了您的flexi代码。它第一次有效，但第二次无效

要解决这个问题，要么你为flexi找到一个角度友好的替代方案（我很确定还有很多），要么你需要编写自己的全局变量来同步flexi和angular上的资源

这对我帮助很大，希望对你也有帮助

Q2。不知道这里的确切问题是什么。但是从我在这里看到的情况来看，也许您需要在控制器中显式地编写close canvas代码？如果没有负责的
管制员
，则需要在
ngRoute
中处理，即在过渡到下一个状态之前关闭导航栏

Q3。添加
$locationProvider.html5Mode（true）
进入模块配置文件，就可以开始了

希望这些有帮助：D
我刚刚有了一个想法。当我把这个推到PROD时，URL看起来不是像
example.com/#/home
？这并不漂亮，但我可以接受：）谢谢！去看这篇文章。。我不知道下面的内容是否有效，但我相信就像你的帖子一样，它指向了正确的方向。谢谢你的反馈，这对我从一个角度思考这个问题有很大的帮助！这是个好消息！现在，您需要做的就是注入该模块，并像使用魔法咒语一样开始使用它！：）