Search code examples
angularjsangular-directive

Angularjs Uncaught ReferenceError on injected service into directive


Still finding my way with angular and I'm getting "Uncaught ReferenceError: y is not defined" on the line ".directive('y',[y,function(y){" . It's like it hasn't loaded the service. I also tried moving the scripts from the bod to the head but nothing do.

    angular.module('fofApp', ['appRoutes'])
    .factory('y',['$rootscope',function($rootScope) {
        return {val: "he"};
    }])
    .directive('yow',[y,function(y){
        return {
            restrict: "E",
            template: "<h1>aaaaah</h1>"
        };
    }]);

My html is

<!doctype html>
<html>
 <head>
 </head>
 <body ng-app="fofApp">
  <yow></yow>
 <script src="libs/angular/angular.js"></script>
 <script src="js/app.js"></script>
 </body>
</html>

Solution

  • Minification protection when using dependency injection requires strings as the first arguments (to match the order/number of the parameters passing into the function), which is always the last argument.

    Change that y in your directive to a string. Like so:

    .directive('yow',['y',function(y){
    

    Here's a fiddle: http://jsfiddle.net/u4v4cafm/ (no errors in console)