2014-11-30 11 views
9

Używam jquery bxslider w moim pierwszym projekcie kątowym. Nie działa z szablonem wewnątrz widoku ng. Jeśli użyjesz tego bez widoku, oznacza to, że działa.jquery bxslider nie działa z szablonami wewnątrz widoku ng

To jest moja strona HTML:

<!doctype html> 
<html ng-app="appSathya"> 
<head> 
<meta charset="utf-8"> 
<title>Modest</title> 
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" href="css/bootstrap.css"> 
<link rel="stylesheet" href="css/style.css"> 
<link rel="stylesheet" href="css/jquery.bxslider.css"> 
</head> 

<body> 
    <header ng-include='"template/header.html"'></header> 
    <section ng-view></section> 

    <script src="js/angular.js"></script> 
    <script src="js/angular-route.min.js"></script> 
    <script src="js/jquery-1.9.1.js"></script> 
    <script src="js/jquery.bxslider.js"></script> 
    <script src="js/main.js"></script> 
</body> 
</html> 

i to jest mój plik javascript

// JavaScript Document 

var app = angular.module('appSathya', ['ngRoute']); 
app.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
    // Home 
    .when("/", {templateUrl: "partials/home.html", controller: "PageCtrl"}) 
}]); 

app.controller('menuController', function($scope){ 
    $scope.menus = [ 
     {mitem:"Home", murl:"#/link"}, 
     {mitem:"About", murl:"#/link"}, 
     {mitem:"Work", murl:"#/link"}, 
     {mitem:"Team", murl:"#/link"}, 
     {mitem:"Services", murl:"#/link"}, 
     {mitem:"Features", murl:"#/link"}, 
     {mitem:"contact", murl:"#/link"} 
    ]; 
}); 

app.directive('startslider',function() { 
    return { 
     restrict: 'A', 
     replace: true, 
     template: '<ul class="bxslider">' + 
        '<li ng-repeat="picture in pictures">' + 
        '<img ng-src="{{picture.src}}" alt="" />' + 
        '</li>' + 
        '</ul>', 
     link: function(scope, elm, attrs) { 
      elm.ready(function() {  
       $("." + $(elm[0]).attr('class')).bxSlider({ 
        mode: 'fade', 
        pager: false, 
        autoControls: true 
      }); 

      }); 
     } 
    }; 
}); 

app.controller('PageCtrl', function($scope) { 
    $scope.pictures = [ 
     {src:'img/banner.jpg' }, 
     {src:'img/banner.jpg' }, 
     {src:'img/banner.jpg' } 
    ]; 
}); 
+0

Utwórz dyrektywę - zobacz tę odpowiedź: http://stackoverflow.com/a/25513865/2792555 –

+0

@AdamGibbons Sprawdzę to i potwierdzisz do ciebie ... – Sathya

+0

Spróbuj zmienić szablon na szablon i dodaj HTML do oddzielnego pliku HTML. –

Odpowiedz

0

Najpierw włącz JQuery przed AngularJS, następnie w jquery użyj jQuery zamiast $, ponieważ kątowy również używa $.

0

Niektóre wtyczki nie działają bezpośrednio z Angular. Np .: - Flexslider ma oddzielne JS, które jest kompatybilne z AngularJS.

Tutaj można rozwiązać problemu, patrząc na here

+0

Podczas gdy ten link może odpowiedzieć na pytanie, lepiej umieścić w nim istotne części odpowiedzi i podać link do odsyłacza. Odpowiedzi dotyczące linków mogą stać się nieprawidłowe, jeśli strona z linkami się zmieni. – ZygD

0

Czy próbowałeś umieszczenie skryptu linki src w nagłówku? Pewnie, czasami trzeba umieścić je w stopce, ale jeśli chcesz, aby strzelały przed czymkolwiek innym, baw się z zamówieniem. Patrząc na kod, sugerowałbym umieszczenie tagów <script src="js/jquery-1.9.1.js"></script><script src="js/jquery.bxslider.js"></script> w głowie?

2

cię zmienić kolejność skryptu zawiera do tego poniżej:

<script src="js/jquery-1.9.1.js"></script> 
<script src="js/angular.js"></script> 

powodem, że kod może działać nieprawidłowo kątowa ma własną wersję jqlite i paski pewnych nazw i atrybuty ... ale jeśli zmieni Kolejność kątowa ma funkcję, która rozpoznaje, czy wywołania jquery zastępują wersje kątowe.