2016-04-22 3 views
3

Я хотел бы динамически впрыскивать некоторые зависимости внутри контроллера. я могу сделать это легко с $ инжектором, как это:Динамический ввод обслуживания (из контроллера)

var app = angular.module('app', []); 

app.service('serv1', function() { 
    var me = this; 

    this.welcome = function(str) { 
    console.log("Welcome " + str + "!"); 
    }; 
}); 

app.controller('Ctrl', function($scope, $injector) { 
    var servMe = $injector.get('serv1'); 

    $scope.greeting = function() { 
    servMe.welcome('Master Obi-wan'); 
    }; 
}); 

Но, допустим, что у меня есть огромная serv1 службы и не хотят «раздувание» мою страницу, если не требуется. Я хотел бы сделать это из моего контроллера (Plunker при условии: http://plnkr.co/edit/Szs4Pg?p=preview)

ошибки я столкнулся в том, что $ инжектор, кажется, не знает о новом загруженной службе. Должен ли я обновить его кеш или что-то еще? Должен ли я создать новый экземпляр?

Большое спасибо заранее.

ответ

4

script.js

var app =angular.module('app', ['oc.lazyLoad']); 
app.controller('Ctrl', function($scope, $injector,$ocLazyLoad) { 
    // But not from inside the controller 
    $ocLazyLoad.load('serv1.js').then(function(){ 
     var servMe = $injector.get('serv1'); 

    $scope.greeting = function() { 
    servMe.welcome('Master Obi-wan'); 
    }; 

    }); 


}); 

serv1.js

angular.module('app',[]).service('serv1', function() { 

    this.welcome = function(str) { 
    console.log("Welcome " + str + "!"); 
    }; 
}); 

HTML

<html> 

    <head> 
    <link data-require="[email protected]" data-semver="1.5.3" rel="stylesheet" href="Bootstrap" /> 
    <script data-require="[email protected]" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/oclazyload/1.0.9/ocLazyLoad.min.js" ></script> 
    <script src="script.js"></script> 
    </head> 

    <body ng-app="app"> 
    <div ng-controller="Ctrl"> 
     <button ng-click="greeting()">Click me!</button> 
    </div> 
    </body> 

</html> 
+0

Thx! Любой вариант, не требующий дополнительной библиотеки. В противном случае можно было бы лениво загрузить библиотеку lazyloading ...? :) – Guillaume

0

Этот код работает для меня:

app.controller('Ctrl', function($scope, $injector) { 
 
    $injector.invoke(["ServiceName", function(service){ 
 
    $scope.service = service; 
 
    }]); 
 
}

Символьная строка может быть любой переменной при условии, динамически. Источник here.

Смежные вопросы