2016-04-22 56 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!任何不需要額外庫的選項。 否則,是否可以延遲加載懶惰庫...? :) – Guillaume

0

此代碼爲我工作:

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

文本字符串可以是動態提供的任何變量。 來源here