Directives angulaires dans un fichier JS séparé ?
-
21-12-2019 - |
Question
J'ai cette directive ngFocused qui fonctionne, mais j'aimerais la mettre dans son propre fichier js.Comment pourrais-je câbler ça ?
var appObject = angular
.module('app', ['ngAnimate'])
.directive('ngFocused', [
function() {
var FOCUS_CLASS = "focused";
return {
restrict: 'A', //Attribute only
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.$focused = false;
element.bind('focus', function(evt) {
element.addClass(FOCUS_CLASS);
scope.$apply(function() { ctrl.$focused = true; });
}).bind('blur', function(evt) {
element.removeClass(FOCUS_CLASS);
scope.$apply(function() { ctrl.$focused = false; });
});
}
}
}
]);
La solution
J'aime l'approche de la vie.Dans votre nouveau fichier:
(function(app) {
app.directive(....)
}(angular.module('app'));
Ça va garder tous vos objets hors de l'espace de noms global.Assurez-vous de référencer votre script définissant votre application angulaire avant son référence.
Autres conseils
Divisez-les simplement en deux fichiers.(Et n'oubliez pas de référencer le nouveau fichier à votre fichier html en utilisant le <script>
étiqueter):
// file app.js
var appObject = angular.module('app', ['ngAnimate'])
// file ngFocused.js
appObject.directive('ngFocused', [ function() {
var FOCUS_CLASS = "focused";
return {
restrict: 'A', //Attribute only
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.$focused = false;
element.bind('focus', function(evt) {
element.addClass(FOCUS_CLASS);
scope.$apply(function() { ctrl.$focused = true; });
}).bind('blur', function(evt) {
element.removeClass(FOCUS_CLASS);
scope.$apply(function() { ctrl.$focused = false; });
})
};
}]);
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow