Benjamin - 专注前端开发和用户体验

NGJS-3 控制器(Controller)

AngularJS教程 Benjamin 1962℃ 0评论

开始本篇之前,先回答上篇中的ng-bind与{{}}区别?
看过AngularJS的源码你会发现,Angular初始化在所有DOM加载完后,当使用{{}}时,模板没有被渲染时会以文本的形式显示,所以我们可以看到。而使用用ng-bind就不会,只是作为一般属性存在,直到Angular完成编译。

控制器可以将一个与独立视图相关的业务逻辑封装在一个独立的容器中,一般在控制器中不适合执行DOM操作、格式化或者数据操作。控制器是视图和$scope的桥梁。我们在开发中建议尽量做到控制精简。可以复杂的逻辑放到指令和服务中去处理。

上一篇中我们把data.message放到了ng-model中,这里我使用ng-controller来控制,下例中的FirstController就是一个独立的容器,是一个scope,控制器嵌套,scope也会嵌套。所有的作用域(指令隔离作用域除外)通过原型来继承。因此子作用域可以访问父作用域的属性。

实例一:基本使用

<div ng-app="myApp">
	<div ng-controller="FirstController">
		<span>{{data.message}}</span>
	</div>
</div>

<script type="text/javascript">
	angular.module('myApp', [])

	.controller("FirstController", function($scope) {
		$scope.data = {
			message: "Hello"
		};
	});
</script>

实例二:嵌套作用域

<div ng-app="myApp">
	<div ng-controller="FirstController">
		<span>{{data.message}}</span>
		<div ng-controller="InnerController">
			{{data.message}}
		</div>
	</div>
</div>

<script type="text/javascript">
	angular.module('myApp', [])

	.controller("FirstController", function($scope) {
		$scope.data = {
			message: "Hello"
		};
	})
	.controller('InnerController', function($scope) {
		$scope.data = {
			message: '您好'
		};
	})
</script>

实例三:作用域继承

<div ng-app="myApp">
	<div ng-controller="FirstController">
		Outer:{{data.message}} //Hello
		<div ng-controller="InnerController">
			Inner:{{data.message}} //Hello
		</div>
	</div>
</div>

<script type="text/javascript">
	angular.module('myApp', [])

	.controller("FirstController", function($scope) {
		$scope.data = {
			message: "Hello"
		};
	})
	.controller('InnerController', function($scope) {
	})
</script>

实例四:实例间共享数据

<div ng-app="myApp">
	<input type="text" ng-model="data.message">
	{{data.message}}

	<div ng-controller="FirstController">
		<input type="text" ng-model="data.message">

		{{data.message}}
	</div>

	<div ng-controller="SecondController">
		<input type="text" ng-model="data.message">

		{{data.message}}
	</div>
</div>

<script type="text/javascript">
	angular.module('myApp', [])

	.controller("FirstController", function($scope) {

	})
	.controller('SecondController', function($scope) {

	})
</script>

由于每个控制器divs内部的绑定都指向了”parent” model
所以三个data.message实例被相互绑定到位于最上层作用域(scope)中的第一个data.message。如果我们删除第一个data.message model,那么每个控制器就没有”parent” model去绑定。此时每个data.message实例将被限制在它们各自的控制器内。

实例五:更改data.message为message

<div ng-app="myApp">
	<input type="text" ng-model="message">
	{{message}}

	<div ng-controller="FirstController">
		<input type="text" ng-model="message">

		{{message}}
	</div>

	<div ng-controller="SecondController">
		<input type="text" ng-model="message">

		{{message}}
	</div>
</div>

<script type="text/javascript">
	angular.module('myApp', [])

	.controller("FirstController", function($scope) {

	})
	.controller('SecondController', function($scope) {

	})
</script>

更改之后,打破了scope继承,绑定所有的data.message实例,现在每个ng-model=“message”创建了一个新的message实例,所以每个model是一个未绑定的实例。

实例六:使用服务在不同控制器间共享数据

实例四中使用”parent” model来共享数据是非常不方便的,本实例中我们使用服务在不同控制器间共享数据。

<div ng-app="myApp">
	<div ng-controller="FirstController">
		<input type="text" ng-model="data.message">

		{{data.message}}
	</div>

	<div ng-controller="SecondController">
		<input type="text" ng-model="data.message">

		{{data.message}}
	</div>
</div>

<script type="text/javascript">
	angular.module('myApp', [])

	.controller("FirstController", function($scope, commonService) {
		$scope.data = commonService;
	})
	.controller('SecondController', function($scope, commonService) {
		$scope.data = commonService;
	})
	.factory('commonService', function() {
		return {
			message: 'I am data from a service'
		};
	})
</script>

实例七:使用服务在不同控制器间共享方法

<div ng-app="myApp">
	<div ng-controller="FirstController">
		<input type="text" ng-model="data.message">

		{{data.reverseMessage(data.message)}}
	</div>

	<div ng-controller="SecondController">
		<input type="text" ng-model="data.message">

		{{data.reverseMessage(data.message)}}
	</div>
</div>

<script type="text/javascript">
	angular.module('myApp', [])

	.controller("FirstController", function($scope, commonService) {
		$scope.data = commonService;
	})
	.controller('SecondController', function($scope, commonService) {
		$scope.data = commonService;
	})
	.factory('commonService', function() {
		return {
			message: 'I am data from a service',
			reverseMessage: function(message) {
				return message.split(" ").reverse().join(" ");
			}
		};
	})
</script>

实例八:Controller as instance

<div ng-app="myApp">
	<div ng-controller="FirstController as d">
		<input type="text" ng-model="d.data.message">

		{{d.data.reverseMessage(d.data.message)}}
	</div>

	<div ng-controller="SecondController as d">
		<input type="text" ng-model="d.data.message">

		{{d.data.reverseMessage(d.data.message)}}
	</div>
</div>

<script type="text/javascript">
	angular.module('myApp', [])

	.controller("FirstController", function($scope, commonService) {
		this.data = commonService;
	})
	.controller('SecondController', function($scope, commonService) {
		this.data = commonService;
	})
	.factory('commonService', function() {
		return {
			message: 'I am data from a service',
			reverseMessage: function(message) {
				return message.split(" ").reverse().join(" ");
			}
		};
	})
</script>

Controller as d,d是控制器的一个实例。

下一节将和大家一起讨论过滤器(Filters)

喜欢 (3)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址