AngularJs学习第五篇从控制器控制器谈谈$范围作用域

控制器的创建

开发控制器使用无处不在，在里代码演示比较简单的创建工作。

！DOCTYPE html html xmlns=' http://www .w . org//XHTML ' ng-app=' exampeap ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-'/title app/title script src=' http : angular。js '/script link href=' bootstrap-theme。CSS ' rel='样式表/link href='bootstrap.css' rel='样式表/脚本棱角分明。模块('示例应用'，[]).控制器(' defaultCtrl '，函数($ scope){ $ scope。SetInput=function(值){ console。日志'(打印：“值”)；}});/script/head body ng-controller=' defaultCtrl ' div class=' well ' h count/hdiv class=' form-group ' input class=' form-control '必需ng-model=' value '/button ng-Click=' setInput(value)' Click/button/div/div/body/html在这控制很简单，首先我在超文本标记语言中添加了再渲染到属性，表示组件的作用范围。

在身体中添加了ng-控制器表示defaultCtrl控制器的作用范围。

投入便签中尼日利亚模型指令的是绑定数据，双向数据绑定(MVVM)。

$范围是开发内置的作用域。

此实例的只是把输入的值打印到控制台中，如图：

仅此而已，简单吧。

多个控制器控制器作用域问题

现在我们来改造下程序，

body div class=' well ' ng-controller=' default ctrl ' h count/hdiv class=' form-group ' input class=' form-control '必需ng-model=' value '/button ng-Click=' setInput(value)' Click/button/div class=' well ' ng-controller=' default ctrl ' h count/hdiv class=' form-group ' input class=' form-control '必需ng-model=' value '/button ng-Click=' setInput(value)' Click/button/button/其余代码不变，我只是把放到身体中的属性ng-控制器放到了两个差异中。我重用了defaultCtrl控制器，猜想下，如果我在第一个投入标签输入内容，我点击第二个控制器的按钮按钮，会出现你所期望的结果吗？

结果是否和你想你的一样呢，大家可以看到这个结果为未定义。在个很好解释，应为他们的作用域不同，虽然你重复使用了统一控制器，但是在创建作用域确实不同的。

调用的工厂函数会返回不同的作用域。

那么如何进行不同作用域之间的访问呢，在开发中对于作用域访问有个$rootScope。

在这里有三个函数需要介绍下，

$on(名称，处理程序)注册一个事件处理函数，该函数在特定的事件被当前作用域收到时将被调用。

$emit(名称，参数)向当前父作用域发送一个事件，直至根作用域。

$broadcast(名称，参数)向当前作用域下的子作用域发送一个事件，参数是事件名称以及一个用于作用向事件提供额外数据的对象。

现在来更改下代码：

剧本棱角分明。模块('示例应用'，[]).控制器(' defaultCtrl '，函数($scope，$rootScope) {$scope .$on('UpdateValue '，函数（事件，参数){ $ scope。输入=参数。zip});$ scope。setInput=函数(值){ $根范围.$broadcast('UpdateValue '，{ zip : value })；控制台。日志(' print:' $ scope。输入)；} $ scope。copy=function(){ console。日志('副本：' $ scope。输入)；};});/script div class=' well ' ng-controller=' defaultCtrl ' h count/hdiv class=' form-group ' input class=' form-control ' required ng-model=' value '/button ng-click=' Copy()' Copy/button/div/div在段代码中我添加了几个函数，同时改变了第二个控制器的函数。

结果：

确实发生了。

控制器继承

剧本棱角分明。模块('示例应用'，[]).控制器(' defaultCtrl '，函数($scope，$rootScope) {//$scope .$on('UpdateValue '，函数（事件，参数){//$作用域。输入=参数。zip//});$ scope。setInput=function(value){//$ root scope .$broadcast('UpdateValue '，{ zip : value })；$ scope.input=valueconsole。日志(' print:' $ scope。输入)；} $ scope。copy=function(){ console。日志('副本：' $ scope。输入)；};}).控制器(' simpleCtrl '，函数($ scope){ $ scope。copy=function(){ console。日志('副本：' $ scope。输入)；};});/script body ng-controller=' Defaultctrl ' div class=' well ' h count/hdiv class=' form-group ' input class=' form-control '必需ng-model=' value '/button ng-Click=' setInput(value)' Click/button/div/div class=' well ' ng-controller=' simpleCtrl ' h count/hdiv class=' form-group ' input class=' form-control '必需ng-model=' value '/button ng-Click=' Copy()' Copy/button/div我添加了一个控制器，简单计算机的ctrl按键仔细观察下，发现defaultCtrl包含了简单计算机的ctrl按键中，所以作用简单的也继承了。

结果图：发下我在第一个窗中输入时，第二个也变了，应为都是同一个价值。

$范围作用域问题，在使用控制器时要明白其作用域。