CODEWITHSUNDEEP
angularjsangularjs-directive
Eladerezador
Eladerezador

Reputation: 1311

Angularjs - Passing a service to a directive dynamically

I have to optimize an application in angularjs 1.2

This is the code jade file, where I pass the service dynamically to my directive (creaDatos.jade)

div(datos-u, service="userDataSrv") // The div has associated a directive to which has service is dynamically passed

This is the code directive (datosU.js)

(appModule.lazy || appModule)
    .directive('datosU', [ function() {

        // Runs during compile
        return {
            restrict: 'A',
            scope: {
                service: '='
            },
            templateUrl: 'commons/html/user.html',
            controller: 'userCtrl'
        };
    }]);

This is the code controller (userCtrl.js)

(appModule.lazy || appModule)
.controller('userCtrl', ['$scope', '$injector',
    function($scope, $injector) {

        var srv = $injector.get($scope.service); /* The variable "srv" should have the value "userDataSrv" but his value is "undefined", The value of "$scope.service" is "undefined" */

    }]);

This is the error in the browser console:

Error: [$injector:unpr] Unknown provider: undefinedProvider <- 
http://errors.angularjs.org/1.2.16/$injector/unpr?p0=undefinedProvider%20%3C-%20

I do not know what I'm doing wrong, can you help me please?

Upvotes: 1

Views: 50

Answers (1)

Andrew Lahikainen
Andrew Lahikainen

Reputation: 370

Instead of using a two-way binding for service (=), use a string binding (@).

So, change your directive to this:

(appModule.lazy || appModule)
    .directive('datosU', [ function() {

        // Runs during compile
        return {
            restrict: 'A',
            scope: {
                service: '@'
            },
            templateUrl: 'commons/html/user.html',
            controller: 'userCtrl'
        };
    }]);

Upvotes: 1

Related Questions