angular.injector

最新推荐文章于 2018-10-25 19:11:22 发布

最新推荐文章于 2018-10-25 19:11:22 发布 · 151 阅读

文章标签：

#angular.injector #AngularJS #AngularJS API #AngularJS API官方文档翻译

AngularJS 同时被 2 个专栏收录

29 篇文章

订阅专栏

AngularJS API

23 篇文章

订阅专栏

本文详细介绍了Angular中injector对象的使用方法，包括如何创建injector对象以获取service和进行依赖注入，并通过示例代码展示其在单元测试和动态元素操作中的应用。

angular.injector

描述:

创建一个injector对象, 调用injector对象的方法可以获得angular的service, 或者用来做依赖注入.

使用方法:

angular.injector(modules, [strictDi])

参数详解:

Param	Type	Details
modules	Array.<string\|Function>	一组module或者他们的别名. ng module需要显示地申明出来.
strictDi (optional)	boolean	Injector需不需要使用严格模式，即允不允许使用默认别名 (default: false)

Param

Type

Details

modules

Array.<string|Function>

一组module或者他们的别名. ng module需要显示地申明出来.

strictDi

(optional)

boolean

Injector需不需要使用严格模式，即允不允许使用默认别名

(default: false)

返回值:

Injector对象.

示例代码:

1. 一般情况下次函数用来做单元测试啦, 我这边的示例比较为了示例而示例

<!DOCTYPE HTML>
<html ng-app="exampleApp">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="jquery-1.7.2.min.js"></script>
	<script src="angular.min.js"></script>
	<script>
			
	var exampleApp = angular.module('exampleApp',[]);
			
	exampleApp.controller('exampleController',['$scope', function($scope){		
		
		$scope.name = "boyi";
		
		$scope.inject = function(){
			var $injector = angular.injector(['ng']);
			
			$injector.invoke(function($http) {
				var scopes = angular.element(document.body).scope();
				scopes.name = "博弈网络";//这里可以同http请求获得数据
			
			});
			
		};
		
	}]);
	
</script>
</head>

<body ng-controller='exampleController'>
<div id="test">博弈网络科技</div>
<div>{{name}}</div>
<div><input type="button" ng-click="inject()" value="injector"/></div>

<hr>

</body>	
</html>

2. 当 Angular的app 已经启动编译好了之后, 有时候你又想强行进入做一些逻辑或者修改，可以使用JQuery/jqLite元素的injector()方法

<!DOCTYPE HTML>
<html ng-app="exampleApp">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="jquery-1.7.2.min.js"></script>
	<script src="angular.min.js"></script>
	<script>
				
			var exampleApp = angular.module('exampleApp',[]);		
	
	exampleApp.controller('exampleController',['$scope', function($scope){
			
		$scope.addElement = function(){
				var div = $('<div ng-controller="MyCtrl">{{content.label}}</div>');
					$(document.body).append(div);
					
				  angular.element(document).injector().invoke(function($compile){
				  	
				  	var scope = angular.element(div).scope();
				  	$compile(div)(scope);
				  	
				  	});
			
		}
	
		
	}]).controller('MyCtrl',['$scope', function($scope){
			$scope.content = {"label":"testing"};
		}]);
	

</script>
</head>

<body ng-controller='exampleController'>
<div id="test">博弈网络科技</div>
<div><input type="button" ng-click="addElement()" value="addElement"/></div>

<hr>

</body>	
</html>