Sé que esto se ha hecho en muchas preguntas, pero la respuesta más común que jQuery no se carga no funciona para mí. Parece que mi jQuery se está cargando correctamente (versión 1.10.2).
Estoy tratando de ejecutar el siguiente código (probado incluso en la consola, por lo que la carga de la cuestión no quedan):
$('.carousel').on('mouseenter',function(){ $( this ).carousel();})

Bootstrap carrusel de por sí está funcionando bien. Es sólo cuando estoy tratando de inicializar de forma dinámica, no funciona. (Acabo de empezar con angulares y bootstrap, así que puede ser que falte algo muy simple aquí.)
Estoy usando angular js y bootstrap para mi aplicación.

EDITAR:
Aquí está mi código html:

<div class="row" ng-controller="ItemGallery" style="padding-top:30px;">
    <div class="col-md-4 item_card" ng-repeat="item in item_array">
        <a href="{{'/product/id='+item.product_id}}" class="thumbnail">
            <div id="{{'carousel_'+item.product_id}}" class="carousel slide" data-ride="carousel" data-interval="false">
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="{{item.thumbnail}}" alt="{{item.product_title}}" class="img-responsive product-image"/>
                    </div>
                    <div class="item">
                        <img src="{{item.nutrition_thumbnail}}" alt="{{item.product_title}}" class="img-responsive nutri-image"/>
                    </div>

                </div>
            </div>
            <div class="caption post-content">
                <h4 class="h_no_margin">
                    <p class="pull-left title">{{item.product_title.toLowerCase() }}</p>
                    <p class="text-right">${{item.price}}</p>
                </h4>
                <small>
                    {{item.product_desc}}
                </small>
            </div>
        </a>

    </div>

</div>

Angular código:

var app = angular.module('item_gallery', []);

app.controller('ItemGallery', function($http, $scope, $location) {
$http.get("/product/list")
.success(function(response) {
    $scope.item_array = response.response;
    });


});

He utilizado bower para tomar el cuidado de las dependencias.

{
 "name": "nutrinext",
 "version": "0.0.0",
 "dependencies": {
  "angular": "~1.3.1",
  "angular-bootstrap": "~0.11.2",
  "angular-timeago": "~0.1.3",
  "angular-ui-router": "~0.2.11",
  "ngstorage": "~0.3.0",
  "bootstrap": "~3.3.0",
  "bootstrap-markdown": "~2.7.0",
  "jquery": "1.10.2",
  "fastclick": "~1.0.3",
  "fontawesome": "~4.2.0",
  "pubnub": "~3.6.4"
 },
"devDependencies": {},
"resolutions": {
  "angular": "~1.3.1",
  "bootstrap": "~3.3.0"
 }
}
  • Viendo su código JS aquí sería de una gran ayuda.
  • Si jQuery no estaba cargada, entonces sería tirar un error de referencia en $. Se dice que carousel no es una función. De donde la has definir carousel?
  • ¿Cuál es en su navegador de la consola, los errores? Se han cargado jQuery ANTES de cargar el Bootstrap archivo js?
  • .carrusel no es una función! uso $(this).slick(); slick
  • compartir angularjs código
  • Puede usted explicar ? No entiendo… carrusel es una función de : aquí está el doc
  • Pensé que carousel se define en bootstrap.js.
  • Usted debe ser capaz de encontrar su respuesta aquí: Cómo utilizar jQuery en AngularJS
  • El problema era que la dependencia no estaba bien hecho, la interfaz de usuario.bootstrap.carrusel faltaba.

InformationsquelleAutor archangel | 2015-06-15

2 Comentarios

  1. 10

    Tuve el mismo problema, Lo que me faltaba era incluidos bootstrap.js en mi index.html, y después de añadir la siguiente funcionó.

    <script type="text/javascript" src="components/bootstrap/dist/js/bootstrap.js"></script>
  2. -3

    Intente cambiar el orden de las etiquetas que tiene el materialize.js funcionó para mí!

    Específicamente, usted debe mantener el orden de las secuencias de comandos en el código fuente:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

    y no la otra manera alrededor.

    • Cambiar cómo? Lo que hizo que se vea como antes, y ¿a qué se parece ahora? Por favor, editar su respuesta a la adición de más detalles.
    • Tratar de mantener este orden de las secuencias de comandos en el código fuente <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    • y no al revés!

Dejar respuesta

Please enter your comment!
Please enter your name here