ANgular指令放在单独的JS文件中

ANgular Directives in a separate JS file?

本文关键字：JS 文件单独指令 ANgular 更新时间：2023-09-26

我有这个ngFocused指令工作，但我想把它放在自己的js文件。我怎么把它连接起来呢?

    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; });
                        });
                    }
                }
            }
        ]);

我喜欢IIFE方法。在新文件中:

(function(app) {
     app.directive(....)
}(angular.module('app'));

这将使您的所有对象远离全局命名空间。在别人引用你的angular应用之前，一定要先引用你定义angular应用的脚本。

将它们拆分为两个文件。(不要忘记使用<script>标记将新文件引用到html文件中):

// 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; });
        })
     };
}]);