errore di compilazione, controller fisarmonica richiesto

Question

Ho riscontrato il seguente errore nella console quando si utilizzava angular-bootstrap ui. Ho angular 1.2.6, bootstrap 3.0 e angular-bootstrap 0.10.0.

Errore: [$ compile: ctreq] Controller 'accordion', richiesto dalla direttiva 'accordionGroup', non può essere trovato!

Qualcuno sa perché succede? Il mio codice html.

<div ui-view> 
     <accordion-group id="crud-talbe" ng-repeat="grid in grids" heading="{{grid.name}}"> 
      <a ng-click="createNewEntity(grid.name)" class="btn btn-default">create new {{grid.name}}</a> 
      <div class="crudGridStyle" ng-grid="grid" /> 
     </accordion-group> 

Answer 1

Dal codice fornito, non è sufficiente il codice richiesto da ui-bootstrap.

Questo assomiglia al minimo di ciò che è necessario e perché il compilatore sta dando l'errore.

<accordion close-others="oneAtATime"> 
    <accordion-group heading="Static Header, initially expanded" is-open="true"> 
     This content is straight in the template. 
    </accordion-group> 
    </accordion> 

Questo è direttamente nella sezione fisarmonica del sito ui-bootstrap ....

Si può vedere che nel codice della direttiva gruppo fisarmonica che è necessaria la fisarmonica ...

Da github:

// The accordion-group directive indicates a block of html that will expand and collapse in an accordion 
.directive('accordionGroup', function() { 
    return { 
    require:'^accordion',   // We need this directive to be inside an accordion 
    restrict:'EA', 
    transclude:true,    // It transcludes the contents of the directive into the template 
    replace: true,    // The element containing the directive will be replaced with the template 
    templateUrl:'template/accordion/accordion-group.html', 
    scope: { 
     heading: '@',    // Interpolate the heading attribute onto this scope 
     isOpen: '=?', 
     isDisabled: '=?' 
    }, 
    controller: function() { 
     this.setHeading = function(element) { 
     this.heading = element; 
     }; 
    }, 
    link: function(scope, element, attrs, accordionCtrl) { 
     accordionCtrl.addGroup(scope); 

     scope.$watch('isOpen', function(value) { 
     if (value) { 
      accordionCtrl.closeOthers(scope); 
     } 
     }); 

     scope.toggleOpen = function() { 
     if (!scope.isDisabled) { 
      scope.isOpen = !scope.isOpen; 
     } 
     }; 
    } 
    }; 
}) 

Answer 2

ho trovato questo errore quando $ compilare da solo. causare mio codice html

<accordion close-others="oneAtATime"> 
    <accordion-group ng-repeat="group in groups" heading="Static Header, initially expanded" is-open="true"> 
     This content is straight in the template. 
    </accordion-group> 
    </accordion> 

modifica

<accordion close-others="oneAtATime" ng-repeat="group in groups"> 
    <accordion-group heading="Static Header, initially expanded" is-open="true"> 
     This content is straight in the template. 
    </accordion-group> 
    </accordion> 

ho riparato

Answer 3

incontrato un problema simile utilizzando un up-to-date ui-bootstrap (come di 2/29/16). Nel mio markup avevo entrambe le direttive di fisarmonica e di fisarmonica come richiesto. Ho inizializzato isOpen, isDisabled solo per vedere se questo era il problema e ho ancora visto il problema.

Si è manifestato solo su Safari mobile per me BTW. Il messaggio di errore era simile a VERRRRY e apparve solo la prima volta che l'app veniva caricata su quel dispositivo. In realtà non ha ostacolato l'app in alcun modo, solo fastidioso.

Aggiunta di "dati" tecnicamente facoltativi ma preferiti prima che tutte le direttive angolari sembrassero risolvere il problema.

Answer 4

Nel mio caso stavo usando il router UI per reindirizzare a $ stato dal controller che ho definito nel config.router.js della mia app. Immagino che questo si stesse innescando prima che il controllore avesse la possibilità di riconoscere la direttiva.

Ho appena avvolto che reindirizzare in un $ timeout:

$timeout(function() { 
    $state.go('state.name', { params }); 
}, 0);