How do inject services to Link function contained directive?

Question

I am trying to inject services to the below directive which is used link function instead of controller.

(function() {
angular
.module("myApp")
.directive('myDirective',['$scope','myService','myData',function($scope,myService,myData) {
return {
     restrict'AE',
     replace:'true',
     templateUrl :'/myApp/directive/my-directive',
     scope: {
      userId: "@"
      }
    },
    link:function(scope,elem,attr)
      {
         //Code for link function goes here ...
          scope.myUsersArray [];
          scope.getUserDetails = function()
              {
                //code for getUserdetails goes here...
              }

       }
    }]);
    })();

When i run this code, i am getting exception like [$injector:unpr] Unkown Provider <_ $scope error. If i remove the injected services, i am not getting any error. Error throws at angular.js file so i don't have any clue to fix it :(

I´m pretty sure you should be using scope instead of $scope in your link function and remove $scope from dependencies — juvian, Mar 16 '16 at 16:31
How do i get differentiation between link function scope and the default angular scope? — JsLearner, Mar 16 '16 at 16:38
Not sure what you mean with default angular scope, but you are probably referring to scope.$parent — juvian, Mar 16 '16 at 16:40
I believe as a debugging step, i have removed and tried but got the same error :( — JsLearner, Mar 16 '16 at 16:40
Note than even though the error will link to angular files, if you open the error on the angular link, it will eventually lead to the error you are actually having — juvian, Mar 16 '16 at 16:41
note that you have multiple sintax errors as well. You should probably start with something that works and then add more: https://jsfiddle.net/1ouk21vu/ — juvian, Mar 16 '16 at 16:57
Is it possible for you to just pass the $compile and $scope to the code you have written without any error? — JsLearner, Mar 16 '16 at 17:50
You can´t pass the $scope, your directive is an isolated scope. You can either use the scope variable from link or you can pass the $rootScope. $compile works fine — juvian, Mar 16 '16 at 17:56
For more info on scopes check http://stackoverflow.com/questions/17900201/how-to-access-parent-scope-from-within-a-custom-directive-with-own-scope-in-an — juvian, Mar 16 '16 at 18:08

score 0 · Answer 1 · answered Mar 16 '16 at 17:03

You have several syntax issues. Your code should look like this:

  .directive('myDirective', ['$scope', 'myService', 'myData', function($scope, myService, myData) {
    return {
      restrict: 'AE',
      replace: 'true',
      templateUrl: '/myApp/directive/my-directive',
      scope: {
        userId: "@"
      },
      link: function(scope, elem, attr) {
        //Code for link function goes here ...
        scope.myUsersArray = [];
        scope.getUserDetails = function() {
          //code for getUserdetails goes here...
        };
      }
    };
  }]);

You may have more problems as its not evident as to why you are injecting $scope, myService, and myData

I have needed my parent scope items, so i am injecting to this directive? — JsLearner, Mar 16 '16 at 17:49
Instead of accessing parent scope, couldn't you just use the reference to your controller that comes in with your link function? i.e. link(scope, element, attrs, ctrl) — jbrown, Mar 16 '16 at 17:51

How do inject services to Link function contained directive?

1 Answers1