Как заставить Angular.js работать с другими библиотеками?

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?

Заранее спасибо

Answer 1

Вам необходимо знать, как работает AngularJs, как правило, вам нужно знать жизненный цикл компонента Angular. Я даю ему пример:

Q1. Большую часть времени Angular не работает хорошо с другими не угловыми файлами javascript. Основная причина, по которой ваш flexi-код не работал после того, как вы нажмете назад (или обновите) на другую страницу, потому что AngularJs не знает наличие флекси-кода.

Как работает Угловая работа, когда загружается ваш HTML-файл (вместе с его необходимыми файлами JS), начнется запуск Angular, добавив необходимые наблюдатели, а затем RERENDER весь HTML-файл. Итак, почему ваш flexi-код не работал? Потому что Angular никогда не наблюдает за ней, поэтому никогда не переваривает ее, и, следовательно, она полностью игнорирует ваш флекси-код. Он работает в первый раз, но не второй.

Чтобы решить эту проблему, вы найдете альтернативу для гибких флюидов (я уверен, что там много), или вам нужно написать свои собственные глобальные переменные для синхронизации ресурсов через ваш flexi и ваш угловой.

Этот post помогает мне, надеюсь, и вам.

Q2. Не знаю, в чем тут проблема. Но из того, что я вижу здесь, может быть, вам нужно явно написать закрытый холст-код в вашем контроллере? Если нет controller, то вам необходимо обработать его в ngRoute, т. Е. Закрыть навигационную панель перед ее переходом в следующее состояние.

Q3. Добавьте $locationProvider.html5Mode(true); в свой конфигурационный файл модуля, и вам хорошо идти.

Надеюсь, это поможет: D

Answer 2

AnJS является одной страницы подход. Таким образом, нет реальных перезагрузок страниц. /#/home верен, это просто способ AnJS для навигации по anchors.

Обычно, если вы хотите общаться с AnJS «миром»/рамки вы должны сделать это через $ применять функции:

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

, потому что в противном случае AnJS не заметит изменений.

Надеюсь, что это поможет.