javascript - 如何让 Angular.js 与其他库一起使用？

Question

我正在建立一个 SPA；我现在已经合并了路线/模板。它大部分工作正常，但是两个插件似乎不起作用，我怀疑是由于我的集成所致？

#1 当页面最初加载时，我的 flexSlider slider 工作正常。但是，当我单击返回 flexslider 页面时， slider 不会再次触发。我在控制台中没有收到任何错误。

这是 slider 实现:

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

    });
});

这是我的 Angular 文件脚本:

    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 我正在使用移动设备的 Canvas 外导航。当我单击相应页面的链接时，我会得到不同的模板/ View ，但侧面板不会关闭。

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

提前致谢

Answer 1

您需要了解 AngularJs 是如何工作的，通常您需要了解 Angular 组件的生命周期。我正在尝试:

第一季度。大多数时候，Angular 不能与其他非 Angular javascript 文件很好地配合。点击返回(或刷新)到另一个页面后，弹性代码无法工作的主要原因是 AngularJs 不知道弹性代码的存在。

Angular 的工作原理是，当您的 HTML 文件(及其必要的 JS 文件)被加载时，Angular 将开始启动，附加必要的监视程序，然后重新渲染整个 HTML 文件。那么为什么你的弹性代码无法工作呢？因为 Angular 从不观察它，因此永远不会消化它，因此，它完全忽略了你的灵活代码。第一次有效，但第二次就不行了。

为了解决这个问题，要么你找到一个 Angular 友好的 Flexi 替代方案(我很确定有很多)，要么你需要编写自己的全局变量来同步 Flexi 和 Angle 之间的资源。

这个post对我很有帮助，希望对你也有帮助。

第二季度。不知道这里的确切问题是什么。但从我在这里看到的，也许您需要在 Controller 中显式编写关闭 Canvas 代码？如果没有 controller 负责，那么您需要在 ngRoute 中处理它，即在转移到下一个状态之前关闭导航栏。

第三季度。将 $locationProvider.html5Mode(true); 添加到您的模块配置文件中，然后就可以开始了。

希望这些有帮助:D