Question

我正在建设SPA;我正处于我已合并路线/模板的地步。它主要工作，但两个插件似乎不起作用，我怀疑是由于我的集成？

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

enter image description here

提前致谢

Answer 1

您需要了解AngularJs的工作原理，通常您需要了解Angular组件的生命周期。我试试看：

<强> Q1 即可。大多数情况下，Angular与其他非角度javascript文件不兼容。单击后退（或刷新）到另一个页面后，flexi代码无法工作的主要原因是AngularJs 不知道是否存在flexi代码。

加载HTML文件时的Angular工作方式（连同必要的JS文件），Angular将开始启动，添加必要的观察者，然后 RERENDER 整个HTML文件。那么为什么你的flexi代码无法工作呢？因为Angular从不看它，因此从不消化它，因此，它完全忽略了你的flexi代码。它第一次有效，但不是第二次。

要解决这个问题，你要么找到一个角度友好的flexi替代品（我很确定那里有很多）或者你需要编写自己的全局变量来同步你的flexi和角度的资源。

这post给了我很多帮助，希望对你也有帮助。

<强> Q2 即可。不知道这里的确切问题是什么。但是从我在这里看到的，也许你需要在控制器中明确地编写close画布代码？如果没有controller负责，那么您需要在ngRoute中处理它，即在转移到下一个州之前关闭导航栏。

<强> Q3 即可。将$locationProvider.html5Mode(true);添加到您的模块配置文件中，您就可以了。

希望这些有用：D

Answer 2

AnJS是一种单页方法。所以没有真正的页面重新加载。 /#/home是正确的，它只是通过anchors表达导航的AnJS方式。

通常，如果你想与AnJS“世界”/范围进行交流，你必须通过$ apply函数来做到这一点：

$rootScope.$apply(function() { /* your code here */)});

因为否则AnJS不会注意到您的更改。

希望这会有所帮助。

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

2 个答案: