angular.injector

最新推荐文章于 2023-07-24 17:01:35 发布

zhifeng687

最新推荐文章于 2023-07-24 17:01:35 发布

阅读量3k

点赞数 1

分类专栏： angular.js

angular.js 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

描述:

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

使用方法:

angular.injector(modules, [strictDi])

参数详解:

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>

摘自：angular.injector

AngularJS依赖注入常用对象注入器 $injector常用API方法，get、has、invoke

get与has
①has方法的作用是从注册的列表查找对应的服务，如果找到返回true，否则返回false;它的调用格式如下：

injector.has(name)
 
 1

②get方法的作用是返回指定名称的服务实例，获取到服务的实例对象后，就可以直接调用服务中的属性和方法，它的调用格式如下：

injector.get(name)
 
 1

为了更深入的理解这两个API的使用方法，我们通过一个简单的示例来演示他们在应用中的使用过程。

③首先，定义一个名为”$custom”的服务，并在该服务中创建一个”print”方法，用于在控制台中输入任意内容;

④然后，调用has方法判断是否存在”$custom”服务；

⑤如果存在，则调用get方法，获取服务的实例对象。并调用该对象的“print”方法输出设定的字符内容。

<!doctype html>
<html ng-app="a4_6">
<head>
    <title>has和get方法</title>
    <script src="../Script/angular.min.js"
            type="text/javascript"></script>
</head>
<body>
    <div ng-controller="c4_6">
        <!-- 视图组件 -->
    </div>
    <script type="text/javascript">
        var a4_6 = angular.module('a4_6', [])
            .factory('$custom', function () {
                return {
                    print: function (msg) {
                        console.log(msg);
                    }
                };
            });
        var injector = angular.injector(['a4_6', 'ng']);
        var has = injector.has('$custom');
        console.log(has);
        if (has) {
            var custom = injector.get('$custom');
            custom.print("控制台输出任意的内容！");
        }
        a4_6.controller('c4_6', ['$scope', '$custom',
            function ($scope, $custom) {
                //控制器代码
            }]);
    </script>
</body>
</html>

 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

invoke方法
invoke方法是一个功能强大的方法，它做常用的场景就是执行自定义函数。除此之外，在执行函数时，还能传递变量给函数本身，他的调用格式如下：

injector.invoke(fn,[self],[locals])
 
 1

在上述代码中，injector为获取$injector对象，参数fn为需要执行的函数名称，可选项参数self是一个对象，表示用于函数中this变量，可选参数locals也是一个对象，它能为函数中变量名的传递提供方法支持。

例如：

<!doctype html>
<html ng-app="a4_7">
<head>
    <title>invoke方法</title>
    <script src="../Script/angular.min.js"
            type="text/javascript"></script>
</head>
<body>
    <div ng-controller="c4_7">
        <!-- 视图组件 -->
    </div>
    <script type="text/javascript">
        var a4_7 = angular.module('a4_7', [])
            .factory('$custom', function () {
                return {
                    print: function (msg) {
                        console.log(msg);
                    }
                };
            });
        var injector = angular.injector(['a4_7', 'ng']);
        var fun = function ($custom) {
            $custom.print("函数执行成功！");
        }
        injector.invoke(fun);
        a4_7.controller('c4_7', ['$scope', '$custom',
            function ($scope, $custom) {
                //控制器代码
            }]);
    </script>
</body>
</html>

 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33