AngularJS HTML partiel ne pouvant pas utiliser jquery lib (chargé dans index.html)

J’utilise un modèle Web qui utilise la galerie d’images JQuery ou autre, etc. Je souhaite convertir ce modèle en structure angularjs. Je fais des pages html partielles comme slider.html ou contact.html et son contrôleur. quand j’appelle du code HTML partiel à indexer, le curseur ne peut pas utiliser les bibliothèques jquery qui les ont chargées dans index. Si je rafraîchit la page quand partielle est ouverte, cela fonctionne à nouveau. J’ai lu certains articles sur les directives, etc., mais je n’écris aucun script, ils sont simplement chargés dans index et html, donc je n’ai besoin d’aucune directive pour faire fonctionner un script.

y a-t-il un moyen?

J’essaie de charger toutes les bibliothèques qui utiliseront partielle, mais de cette façon, toutes les bibliothèques chargées chaque appel et cela fonctionne, mais ce n’est pas une bonne façon

J’ai quelques astuces: Tout d’abord, vos bibliothèques ne doivent pas être incluses dans la vue. Vous devez inclure la bibliothèque juste à un sharepoint votre application. Peut être asynchrone (via JavaScript) ou en ajoutant la balise de script pour la bibliothèque dans votre fichier d’index.

Si vous décidez d’append la bibliothèque via JavaScript, prenez en compte le contrôle pour éviter les multiples inclus, par exemple:

 if (!window.jQuery) { //include jQuery library }

Vous pouvez également append la balise de script dans votre fichier html index / main et, si vous souhaitez le charger de manière asynchrone, vous pouvez append les atsortingbuts de manière async ou defer .
– Regardez HTML 5 .

Maintenant, en lien avec AngularJS , lorsque vous chargez une vue partielle, l'événement $includeContentLoaded est $includeContentLoaded et est émis à chaque ngInclude contenu ngInclude .

Si vous avez deux vues partielles ou plus incluses, vous devriez demander la vue spécifique dans laquelle vous voulez charger une bibliothèque / un plugin ou effectuer une manipulation DOM, par exemple:

controller.js

 angular .module('myApp') .controller('HomeCtrl', [ '$scope', '$window', function ($scope, $window) { 'use ssortingct'; var homeCtrl = this, $ = jQuery; //safe alias //Emitted every time the ngInclude content is reloaded. $scope.$on('$includeContentLoaded', function (event, source) { if ('src/pages/home/zipcodeForm/view.html' === source) { //initialize your jQuery plugins, or manipulate the DOM for this view } else if('src/pages/home/section1/view.html' === source){ //initialize your jQuery plugins, or manipulate the DOM for this view } }); //Can be used to clean up DOM bindings before an element is removed //from the DOM, in order to prevent memory leaks $scope.$on('$destroy', function onDestroy() { //destroy event handlers }); } ]);

Le code qui compte ici est l'événement $includeContentLoaded . Visitez le site pour plus d'informations: https://docs.angularjs.org/api/ng/directive/ngInclude

Si vous utilisez ng-view vous ne devriez pas rencontrer de problèmes, il suffit d’enregistrer la vue dans le routeur (il existe de nombreuses façons d’obtenir la même chose)

module.js

 angular .module('myApp', ['ngRoute' /*, other dependecies*/]);

routeur.js

 angular .module('myApp') .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { 'use ssortingct'; $routeProvider .when('/', { templateUrl: 'src/pages/home/view.html', controller: 'HomeCtrl', controllerAs: 'homeCtrl', reloadOnSearch: false }) .when('/index.html', { redirectTo: '/' }) .when('/home', { redirectTo: '/' }) .when('/404', { templateUrl: 'src/pages/error404/view.html', controller: 'Error404Ctrl', controllerAs: 'error404Ctrl' }) .otherwise({ redirectTo: '/404' }); /* Set up the location to use regular paths instead of hashbangs, to take advantage of the history API $locationProvider.html5Mode(true); */ } ]);

Lorsque la vue est chargée, elle émet l'événement: $ viewContentLoaded, ce qui signifie que le DOM est chargé. Vous pouvez initialiser les plugins jQuery en toute sécurité.

controller.js

 angular .module('myApp') .controller('HomeCtrl', [ '$scope', '$window', function HomeCtrl ($scope, $window) { 'use ssortingct'; var homeCtrl = this, //the controller $ = jQuery; //safe alias to jQuery //Emitted every time the ngView content is reloaded. $scope.$on('$viewContentLoaded', function() { $('.slickSlider').slick({ slidesToShow: 4, arrows: true, slidesToScroll: 1 }); }); } ]);

Important : Dans le code précédent, l'ordre dans lequel les scripts sont inclus est important.

module.js
routeur.js
controller.js

Je recommande fortement d'utiliser des outils d'automatisation tels que gulp