jquery bxslider não está funcionando com modelos dentro da visão ng

9

Estou usando o jquery bxslider no meu primeiro projeto angular. Não está a trabalhar com o modelo dentro da vista. Se usar este sem visão, significa que está funcionando.

Esta é minha página 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>

e este é o meu arquivo 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' }
     ];
});
    
por Sathya 30.11.2014 в 18:38
fonte

5 respostas

2

Altere a ordem do script que inclui para esta abaixo:

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

o motivo pelo qual seu código pode ter um mau funcionamento angular tem sua própria versão do jqlite e retira determinados namespaces e atributos ... mas se você alterar a ordem angular terá uma função que reconhecerá se jquery chama de superceder as versões angulares.

    
por Jcoder28 25.02.2016 / 19:33
fonte
0

Se tudo que você precisa é usar um plugin jQuery dentro do Angular, então a diretiva jQuery Passthrough deve fazê-lo.

    
por Dmitri Zaitsev 27.12.2014 / 15:08
fonte
0

Primeiro, inclua JQuery antes de AngularJS e, em seguida, no código jquery, use jQuery em vez de $, já que o angular também usa $.

    
por Ramang 06.01.2015 / 13:01
fonte
0

Alguns plugins não funcionam diretamente com o Angular. Ex: - O Flexslider tem um JS separado que é compatível com o AngularJS.

Aqui, você pode resolver seu problema examinando here

    
por user2584538 17.04.2015 / 13:46
fonte
0

Você já tentou colocar seus links de script src no cabeçalho? Claro, às vezes é necessário colocá-los no rodapé, mas se você quiser que eles disparem antes de qualquer outra coisa, jogue com o pedido. Olhando para o código, sugiro colocar suas tags <script src="js/jquery-1.9.1.js"></script><script src="js/jquery.bxslider.js"></script> na cabeça?

    
por Kurtis Rogers 31.05.2015 / 10:20
fonte