uibmodal modal example bootstrap angularjs angularjs-directive angular-ui yeoman angular-ui-bootstrap

angularjs - modal - ui bootstrap 4



usando ui.bootstrap causando problemas con el carrusel (7)

Agregue ng-non-bindable y cambie href para data-target

<a class="left carousel-control" data-target="#myCarousel" role="button" data-slide="prev" ng-non-bindable><</a> <a class="right carousel-control" data-target="#myCarousel" role="button" data-slide="next" ng-non-bindable>></a>

Tengo problemas para que el carrusel funcione correctamente. Usé yeomen para andamiar la aplicación angular. Estoy recibiendo este error

Error: [$compile:ctreq] Controller ''carousel'', required by directive ''slide'', can''t be found! http://errors.angularjs.org/1.2.26/$compile/ctreq?p0=carousel&p1=slide at http://localhost:9000/bower_components/angular/angular.js:78:12 at getControllers (http://localhost:9000/bower_components/angular/angular.js:6543:19) at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6712:35) at http://localhost:9000/bower_components/angular/angular.js:6913:13 at http://localhost:9000/bower_components/angular/angular.js:8113:11 at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81) at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81) at http://localhost:9000/bower_components/angular/angular.js:11659:26 at Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:12702:28) at Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:12514:31) <div ng-class="{ ''active'': leaving || (active &amp;&amp; !entering), ''prev'': (next || active) &amp;&amp; direction==''prev'', ''next'': (next || active) &amp;&amp; direction==''next'', ''right'': direction==''prev'', ''left'': direction==''next'' }" class="left carousel-control item text-center ng-isolate-scope" ng-transclude="" href="#Carousel" data-slide="prev"> angular.js:10072 Error: [$compile:ctreq] Controller ''carousel'', required by directive ''slide'', can''t be found! http://errors.angularjs.org/1.2.26/$compile/ctreq?p0=carousel&p1=slide at http://localhost:9000/bower_components/angular/angular.js:78:12 at getControllers (http://localhost:9000/bower_components/angular/angular.js:6543:19) at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6712:35) at http://localhost:9000/bower_components/angular/angular.js:6913:13 at http://localhost:9000/bower_components/angular/angular.js:8113:11 at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81) at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81) at http://localhost:9000/bower_components/angular/angular.js:11659:26 at Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:12702:28) at Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:12514:31) <div ng-class="{ ''active'': leaving || (active &amp;&amp; !entering), ''prev'': (next || active) &amp;&amp; direction==''prev'', ''next'': (next || active) &amp;&amp; direction==''next'', ''right'': direction==''prev'', ''left'': direction==''next'' }" class="right carousel-control item text-center ng-isolate-scope" ng-transclude="" href="#Carousel" data-slide="next"> angular.js:10072

Aquí está mi archivo html

<style> #slides_control > div{ height: 200px; } img{ margin:auto; width: 400px; } #slides_control { position:absolute; width: 400px; left:50%; top:20px; margin-left:-200px; } .carousel-control.right { background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(237, 232, 232, 0.5) 100%) !important; } .carousel-control.left { background-image: linear-gradient(to right, rgba(249, 248, 248, 0.5) 0%, rgba(0, 0, 0, .0001) 100%) !important; } </style> <div id="Carousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="Carousel" data-slide-to="0" class="active"></li> <li data-target="Carousel" data-slide-to="1"></li> <li data-target="Carousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="images/sliders/main_page_slider/PhoneApp_Website_Home_41.png" class="img-responsive"> </div> <div class="item"> <img src="images/sliders/main_page_slider/PhoneApp_Website_Home_45.png" class="img-responsive"> </div> <div class="item"> <img src="images/sliders/main_page_slider/PhoneApp_Website_Home_49.png" class="img-responsive"> </div> </div> <a class="left carousel-control" href="#Carousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#Carousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>

mi controlador es

''uso estricto'';

angular.module (''myhApp'') .controller (''MainCtrl'', function ($ scope) {});

aqui esta mi app.js

angular .module(''myhApp'', [ ''ngAnimate'', ''ngCookies'', ''ngResource'', ''ngRoute'', ''ngSanitize'', ''ngTouch'', ''ui.bootstrap'' ]) .config(function ($routeProvider) { $routeProvider .when(''/'', { templateUrl: ''views/main.html'', controller: ''MainCtrl'' }) .when(''/about'', { templateUrl: ''views/about.html'', controller: ''AboutCtrl'' }) .otherwise({ redirectTo: ''/'' }); });

No estoy seguro de qué lo está causando. Cualquier ayuda será apreciada.

** Algunos hallazgos recientemente **

ok, hice algunas excavaciones y descubrí que tengo que tener un carrusel en el dom para la directiva (como indica el error). Cuando agrego el carrusel, el error desaparece, pero mi carrusel ya no funciona y se ve borroso también.

Aquí está el cambio que hice a html.

<div id="Carousel" class="carousel slide" carousel>

Aquí es cómo se ve y se puede ver que hay una flecha adicional en la cara de los gatos. No estoy seguro de qué va ... cualquier ayuda será apreciada.

Cuando compile con angular olvide el javascript de bootstrap. Use solo css.Especialmente cuando use ngRoute. Lee los hashes de la url entre otras cosas. Para carruseles, use ui.bootstrap.carousel, lea el documento y vea el ejemplo que se muestra en la page . Es simple y conciso. De lo contrario, siempre habrá un error en la consola, es decir, si el carrusel funciona.

Pude resolver el conflicto agregando el ng-no vinculable a los elementos que tienen la directiva de deslizamiento de datos. vea abajo:

<a data-slide="prev" href="#clients-slider" ng-non-bindable class="left carousel-control">‹</a>

Según la respuesta de gooseman en SO:

angular.module(''ui.bootstrap.carousel'', [''ui.bootstrap.transition'']) .controller(''CarouselController'', [''$scope'', ''$timeout'', ''$transition'', ''$q'', function ($scope, $timeout, $transition, $q) { }]).directive(''carousel'', [function() { return { } }]);

Simplemente elimine ui.bootstrap de la lista de módulos si no lo necesita.

Tengo el mismo problema y no sé por qué, pero si elimina su HTML data-slide="prev" y data-slide="next" desaparece el error.

data-slide es utilizada tanto por Bootstrap como por ui.bootstrap, por lo que aquí hay un conflicto. Si desea utilizar el método de carrusel de Bootstrap normal, puede indicar a angular que ignore un elemento DOM y que sea secundario.

Para hacer eso, inserte ngNonBindable en el elemento Dom apropiado.