CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
chuckfinley
chuckfinley

Reputation: 2595

Dependency issue in Angular JS

I just created a new directive, however the console is giving me an error. I believe there is a problem with dependencies as the directive is unable to see a method within the controller.

How can i fix this?

Error message:

Error: $scope.resetMessages is not a function

Controller:

angular.module('modulename').controller('controllerName', ['$scope', '$location', 'Global', 'Company', function ($scope, $location, Global, Company) {

    /* A bunch of declarations and methods... */

    $scope.resetMessages = function() {
      $scope.errorMessage = null;
      $scope.successMessage = null;
    };

}]);

Directive:

angular.module('modulename').directive('directiveName', function() {

    return {
        restrict: 'E',
        templateUrl: 'path/to/template.html',
        scope: {
            'Company': '&',
            'Global': '&'
        },
        controller: function($scope) {

             /*
               A bunch of methods...       
              */  

        }
    };
});

Upvotes: 0

Views: 53

Answers (1)

David Boike
David Boike

Reputation: 18645

As Anthony Chu alluded to, this section creates an isolated scope:

    scope: {
        'Company': '&',
        'Global': '&'
    },

That means it does NOT prototypically inherit from the parent scope, although the parent scope is available via $parent although, as Anthony mentions, this isn't a great idea because it creates coupling between the two, which you are presumably trying to sever with an isolated scope in the first place.

You shouldn't need an isolated scope at all in this case. To get access to Company and Global (both available in the Controller via dependency injection) you can just inject them into your directive too:

angular.module('modulename').directive('directiveName', 
    ['Global', 'Company', function (Global, Company) {
        // Return directive config here
    }]);

Then you can omit scope: (anything) in the directive completely, and it will be the SAME scope as the controller, or if necessary, you can do scope: true to get a new scope that DOES prototypically inherit from the parent. In either case, $scope.resetMessages() would be available.

Here is a handy cheat sheet to the different directive scope options.

Upvotes: 1

Related Questions