javascript - Where is my Angularjs minify error? Error $injector - Stack Overflow

admin管理员组

文章数量:1289831

I'm running into that annoying Angular minify problem (I really hope this issue is non-existent in Angular 2)

I've mented out all my app module injections and going down the list 1 by 1 to find out where the problem is and I think I narrowed it down to my searchPopoverDirectives:

Can you see what I'm doing wrong?

Original code, produces this error Unknown provider: eProvider <- e:

(function() { "use strict";

    var app = angular.module('searchPopoverDirectives', [])

    .directive('searchPopover', function() {
        return {
            templateUrl : "popovers/searchPopover/searchPopover.html",
            restrict    : "E",
            scope       : false,
            controller  : function($scope) {

                // Init SearchPopover scope:
                // -------------------------
                var vs = $scope;
                vs.searchPopoverDisplay = false;

            }
        }
    })

})();

I then tried the [] syntax in an attempt to fix the minify problem and ran into this error Unknown provider: $scopeProvider <- $scope <- searchPopoverDirective:

(function() { "use strict";

    var app = angular.module('searchPopoverDirectives', [])

    .directive('searchPopover', ['$scope', function($scope) {
        return {
            templateUrl : "popovers/searchPopover/searchPopover.html",
            restrict    : "E",
            scope       : false,
            controller  : function($scope) {

                // Init SearchPopover scope:
                // -------------------------
                var vs = $scope;
                vs.searchPopoverDisplay = false;

            }
        }
    }])

})();

---

UPDATE: Also found out this guy is causing a problem:

.directive('focusMe', function($timeout, $parse) {
    return {
        link: function(scope, element, attrs) {
            var model = $parse(attrs.focusMe);
            scope.$watch(model, function(value) {
                if (value === true) { 
                    $timeout(function() {
                        element[0].focus(); 
                    });
                }
            });
            element.bind('blur', function() {
                scope.$apply(model.assign(scope, false));
            })
        }
    }
})

I'm running into that annoying Angular minify problem (I really hope this issue is non-existent in Angular 2)

I've mented out all my app module injections and going down the list 1 by 1 to find out where the problem is and I think I narrowed it down to my searchPopoverDirectives:

Can you see what I'm doing wrong?

Original code, produces this error Unknown provider: eProvider <- e:

(function() { "use strict";

    var app = angular.module('searchPopoverDirectives', [])

    .directive('searchPopover', function() {
        return {
            templateUrl : "popovers/searchPopover/searchPopover.html",
            restrict    : "E",
            scope       : false,
            controller  : function($scope) {

                // Init SearchPopover scope:
                // -------------------------
                var vs = $scope;
                vs.searchPopoverDisplay = false;

            }
        }
    })

})();

I then tried the [] syntax in an attempt to fix the minify problem and ran into this error Unknown provider: $scopeProvider <- $scope <- searchPopoverDirective:

(function() { "use strict";

    var app = angular.module('searchPopoverDirectives', [])

    .directive('searchPopover', ['$scope', function($scope) {
        return {
            templateUrl : "popovers/searchPopover/searchPopover.html",
            restrict    : "E",
            scope       : false,
            controller  : function($scope) {

                // Init SearchPopover scope:
                // -------------------------
                var vs = $scope;
                vs.searchPopoverDisplay = false;

            }
        }
    }])

})();

---

UPDATE: Also found out this guy is causing a problem:

.directive('focusMe', function($timeout, $parse) {
    return {
        link: function(scope, element, attrs) {
            var model = $parse(attrs.focusMe);
            scope.$watch(model, function(value) {
                if (value === true) { 
                    $timeout(function() {
                        element[0].focus(); 
                    });
                }
            });
            element.bind('blur', function() {
                scope.$apply(model.assign(scope, false));
            })
        }
    }
})

• javascript
• angularjs
• minify
• angularjs-injector

Share Improve this question Follow edited May 8, 2015 at 15:41 Leon Gaban asked May 8, 2015 at 15:23 Leon GabanLeon Gaban 39k122122 gold badges348348 silver badges550550 bronze badges 3

• 1 you tried [] syntax in wrong place :-) move it from directive ( where you not dependency), to controller function – Grundy Commented May 8, 2015 at 15:25
• 1 on update: here you solution with directives should work :-) – Grundy Commented May 8, 2015 at 15:47
• 2 I use ng-annotate (github./olov/ng-annotate) before minifying. It does that automatically. – pgrodrigues Commented May 8, 2015 at 16:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

When you minify code, it minify all code, so your

controller  : function($scope) {

was minified to something like

controller  : function(e) {

so, just use

controller  : ["$scope", function($scope) { ... }]

When minifying javascript the parameter names are changed but strings remain the same. You have 2 ways that you can define which services need to be injected:

1. Inline Annotation:

   phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http){
       ...
   }]);
   

2. Using the $inject property:

   phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);
   
   PhoneListCtrl.$inject = ['$scope', '$http'];
   
   function PhoneListCtrl($scope, $http){
       ...
   }
   

Using $inject is considered more readable than inline annotations. It is best practice to always have one line declaring the controller, service, or directive, one line for defining the injection values, and finally the implementation method. The method may be defined last due to the hoisting nature of javascript.

Remember: The order of your annotation (strings) and your function parameters must be the same!

本文标签： javascriptWhere is my Angularjs minify error Error injectorStack Overflow