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

我在建SPA;我处于合并路线/模板的阶段。它主要工作，但是两个插件似乎不工作，我怀疑是由于我的整合？如何让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？

enter image description here

在此先感谢

来源

2014-10-04 Antonio Pavicevac-Ortiz

您需要知道AngularJs是如何工作的，通常您需要知道Angular组件的生命周期。我试一试：

Q1。大多数情况下，Angular与其他非角度JavaScript文件不兼容。在您点击返回（或刷新）到另一个页面后，您的flexi代码失败的主要原因是因为AngularJs 不知道 flexi代码的存在。

当您的HTML文件被加载时（与其必需的JS文件一起），Angular将如何启动，追加必要的观察者，然后整个HTML文件。那么为什么你的flexi代码失败了？由于Angular从未观看过它，因此不会消化它，因此它完全忽略了您的灵活代码。它第一次工作，但不是第二次。

要解决这个问题，要么找到flexi的角度友好型替代品（我非常肯定有很多），或者您需要编写自己的全局变量来跨Flexi和角度同步资源。

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

Q2。不知道这里有什么确切的问题。但从我在这里看到的，也许你需要在你的控制器中明确写出关闭画布代码？如果没有controller负责，那么您需要在ngRoute中处理它，即关闭导航栏，然后转到下一个状态。

Q3。将$locationProvider.html5Mode(true);添加到你的模块配置文件中，你很好走。

希望这些帮助：D

来源

2014-10-04 18:01:07 CozyAzure

要阅读这篇文章..不知道以下内容是否有效，但我确定像你的文章是指向正确的轨道。 https://github.com/thenikso/angular-flexslider和http://pineconellc.github.io/angular-foundation/ 感谢您的反馈，帮助我以角度思考问题！ – 2014-10-04 20:00:34

这是个好消息！现在，您只需注入该模块并开始使用它就像一个神奇的魅力！ :) – CozyAzure 2014-10-04 20:03:43

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

通常情况下，如果你想与AnJS“世界” /范围传达你必须通过$做这个应用功能：

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

，否则AnJS不会注意到你的变化。

希望这会有所帮助。

来源

2014-10-04 16:56:17

我只是有一个想法。当我把它推到PROD时，URL不会看起来像'example.com /＃/ home'吗？这不是很好，但我可以忍受那:)谢谢！ – 2014-10-04 17:06:41

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

回答

相关问题