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?

Answer 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).

Answer 2

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.