jquery metisMenu ne fonctionne pas dans ng-include

Je veux utiliser ng-include pour rendre la barre latérale du modèle . Le modèle nécessite le plugin jQuery metisMenu pour les listes déroulantes.

Problème : le plug-in ne fonctionne que lorsque je charge les scripts suivants dans le modèle partiel ‘sidebar.html’:

 $(function() { $('#side-menu').metisMenu(); });

et échoue lorsque j’essaie de les charger dans index.html .

Je souhaite charger le plug-in une seule fois dans index.html, car je pourrais en avoir besoin également dans d’autres partiels. Voici un Plunker du modèle de travail qui nécessite le chargement de script dans des partiels. Notez que lors du déplacement de scripts de sidebar.html vers index.html, le menu déroulant cesse de fonctionner.

Toute aide serait appréciée. Merci d’avance.

J’ai le même problème. Vous devez append metisMenu (); dans votre contrôleur principal:

 app.controller('mainController', function($scope, Config) { $('#side-menu').metisMenu(); });

Cela ne fonctionne probablement pas sur index.html car lorsqu’il est lancé, le menu latéral n’est pas encore présent. C’est le moyen de déclencher la méthode jQuery après que AngularJS ait obtenu le partiel du site.

L’ajout d’un object de lien appelé $ (élément) .metisMenu () à l’intérieur d’une fonction setTimeout l’a corrigé.

 app.directive('sideNav', function() { return{ ressortingct: 'E', templateUrl: 'side_nav.html', link: function(scope, element, attrs){ // execute metisMenu plugin setTimeout(function(){ $(element).metisMenu(); }, 1); }, controller: function(){ this.selectedNav = {}; this.selectTab = function(setTab){ this.tab = setTab; }; this.isSelected = function(checkTab){ return checkTab === this.tab; }; this.navItems = [{ name: 'Dashboard', icon: 'fa-dashboard' },{ name: 'Logs', icon: 'fa-code' },{ name: 'Firm Diagnostics', icon: 'fa-stethoscope', navItems: [ { name: 'Disk I/O' },{ name: 'Disk Space' },{ name: 'Processor Information' },{ name: 'Processor Activity' },{ name: 'Memory Information' },{ name: 'Memory Usage' },{ name: 'Network Configuration' },{ name: 'Processes' },{ name: 'Services' },{ name: 'System Information' } ] }]; }, controllerAs: 'sideNav' };});

Vous pouvez append une fonction de rappel onload à ng-include

et appelez la fonction metisMenu dans la fonction chargée

 app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.loaded = function() { $('#side-menu').metisMenu(); } });

C’est Plunker