Gui*_*ume 4 dependency-injection angularjs
我想在控制器中动态注入一些依赖项.我可以使用$ injector这样轻松地完成:
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');
};
});
Run Code Online (Sandbox Code Playgroud)
但是,假设我有一个庞大的服务serv1,如果不需要,我不想"膨胀"我的页面.我想在我的控制器内完成它(Plunker提供:http://plnkr.co/edit/Szs4Pg?p = preview )
我面临的错误是$ injector似乎不知道新加载的服务.我应该刷新它的缓存还是什么?我应该实例化一个新的吗?
提前谢谢了.
的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');
};
});
});
Run Code Online (Sandbox Code Playgroud)
serv1.js
angular.module('app',[]).service('serv1', function() {
this.welcome = function(str) {
console.log("Welcome " + str + "!");
};
});
Run Code Online (Sandbox Code Playgroud)
HTML
<html>
<head>
<link data-require="angular.js@1.5.3" data-semver="1.5.3" rel="stylesheet" href="Bootstrap" />
<script data-require="angular.js@1.5.3" 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>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
2327 次 |
| 最近记录: |