AngularJS $scope Undefined When Compiling Controller In Directive

Question

I'm using ant to build/uglyfy my AngularJS and each time I have a controller in a directive, I get an undefined $scope error. Example of code is this:

app.directive('directive1',['$compile', '$http',function($compile, $http) {
    return {
        restrict: "A",
        controller : function($scope) {
            var posts = {};
            this.addPosts = function($scope, newPosts) {

                angular.extend(posts, newPosts);
                //$scope.$apply(function() {
                    $scope.posts = posts;
                //});
            };
        },
        link: function (scope, element, attrs) {
           scope.posts = {};
        }
    };
}]);

My question is, how can I define the $scope of the controller to when it is compiled it doesn't come up as undefined?

KayakDave · Accepted Answer · 2013-11-27 02:13:45Z

1

You want to apply the same minifier/ulgifier safe approach you did on the directive definition to your controller.

So your controller goes from:

controller : function($scope) {

to:

controller: ['$scope',function($scope) {

The uglifier is renaming $scope to something short like 'e' which is great for size but Angular doesn't know what to inject into 'e'.

The uglifier won't change a string. So the new code, above, lets angular know it should inject $scope into 'e' (or whatever name the uglifier gives it).

edited Nov 27, 2013 at 2:13

answered Nov 26, 2013 at 22:44

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jonathan Rowny Over a year ago

You shouldn't need to, directive controllers have a set number of args. They are not freely injectable as a real controller is.

Jonathan Rowny Over a year ago

Actually, I'm wrong. This has changed... what I said used to be true but now angular actually does support injection and bracket notation.

Jonathan Rowny · Accepted Answer · 2013-11-26 22:47:46Z

0

this.addPosts = function($scope, newPosts) {

What is calling this function? Why are you trying to pass $scope into it? I think you should change it to:

$scope.addPosts = function(newPosts) {

Because you want to get the first $scope... not whatever scope you're attempting to pass into addPosts.

edited Nov 26, 2013 at 22:47

answered Nov 26, 2013 at 22:38

Jonathan Rowny

7,5981 gold badge21 silver badges26 bronze badges

2 Comments

Devin Dixon Over a year ago

Not the problem or concern, the problem is the $scope does not persist when uglyfied. It works otherwise.

Jonathan Rowny Over a year ago

It might be your problem. A minifier will rewrite the first arg of controller as something like function(a) then the addPosts function will get minified as function(b, c)... I can't tell why you're writing your addPosts function like that. Can you explain why it's passing $scope into addPosts? That's just... odd.

Collectives™ on Stack Overflow

AngularJS $scope Undefined When Compiling Controller In Directive

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related