Angular.JS从新手到专家七步（二）：Scopes

时间：2023-03-13 04:20:34 科技观察

这是《AngularJS-从新手到专家七步》系列文章的第二篇。在第一篇文章中，我们展示了如何开始构建Angular应用程序。在本文中，我们将讨论理解AngularJS工作原理所必需的基本概念，以及如何最好地使用它。在本系列教程中，我们将为NPR（国家公共广播电台）电台开发一个音频播放器，它可以显示早间版节目中当前播出的最新故事，并在我们的浏览器中播放。可以在此处查看演示的完整版本。第二部分Scopes$scope是一个将视图（DOM元素）链接到控制器的对象。在我们的MVC结构中，这个$scope将是模型，它提供绑定到DOM元素（及其子元素）的异常上下文。听起来很复杂，$scope实际上是一个JavaScript对象，控制器和视图都可以访问，所以我们可以用它在两者之间传递信息。在这个$scope对象中，我们存储了将在视图上运行的数据和函数。每个Angular应用程序都会有一个$rootScope。这个$rootScope是最好的范围，它对应于包含ng-app指令属性的DOM元素。如果页面上没有显式设置$scope，Angular将在此处绑定数据和函数，***部分中的示例依赖于此才能成功运行。在此示例中，我们将使用$rootScope。在main.js文件中，我们将名称属性添加到此范围。将此函数放在app.run函数中可确保它将在应用程序的其余部分之前执行。您可以将app.run函数视为Angular应用程序的主要方法。app.run(函数($rootScope){$rootScope.name="AriLerner";});现在，我们可以使用模板表达式{{}}在视图中的任何位置访问此名称属性，如下所示：{{name}}在本系列的后续章节中，我们将深入研究模板表达式的语法。请参阅：AriLerner简而言之：要真正了解作用域的强大功能，让我们向DOM元素添加一个控制器，这将为该元素创建一个$scope，使我们能够与该元素进行交互。要为ng-controller明确创建一个$scope对象，我们需要在DOM元素上安装一个控制器对象，使用ng-controller指令属性：{{person.name}}

g-controller指令为它所在的DOM元素创建一个新的$scope对象，并将这个$scope对象包含到外部DOM元素的$scope对象中。在上面的示例中，外部DOM元素的$scope对象是$rootScope对象。作用域链是这样的：现在，MyController为我们创建了一个$scope对象，可以从DOM元素中直接访问它。下面我们在这个$scope中创建一个person对象，在main.js中：app.controller('MyController',function($scope){$scope.person={name:"AriLerner"};});现在我们可以在具有ng-controller='MyController'属性的DOM元素的任何子元素中访问这个person对象，因为它在$scope上。请参阅：AriLerner除了一个例外，所有作用域都遵循原型继承，这意味着它们都可以访问其父作用域。对于任何属性和方法，如果AngularJS在当前范围内找不到，它会在父范围内寻找。如果在父作用域中找不到它，它将继续回溯，直到到达$rootScope。唯一的例外：一些指令属性可以选择创建一个单独的作用域，这样这个作用域就不会继承它的父作用域。例如，假设我们有一个带有person对象的ParentController和一个想要访问该对象的ChildController：app.controller('ParentController',function($scope){$scope.person={greeted:false};});app.controller('ChildController',function($scope){$scope.sayHello=function(){$scope.person.greeted=true;}});当我们在视图中将ChildController绑定到ParentController之后，在子元素中，我们可以访问ParentController创建的父作用域的属性，就像访问ChildController自身作用域中的属性一样：

Sayhello

#p#See：合并到myApp现在，我们将$scope用于我们的NPR应用程序。在上一篇文章的最后我们定义了appmodule，现在我们开始深入DOM结构并创建基本功能。如上例所示，我们首先创建一个名为PlayerController的rootcontroller。还有一个RelatedController负责管理音频DOM元素并为我们获取NPR节目列表。回到main.js，让我们现在创建这两个控制器：varapp=angular.module('myApp',[]);app.controller('PlayerController',['$scope',function($scope){}]);app.controller('RelatedController',['$scope',function($scope){}]);这两个音频控制器还没有功能，所以让我们先给应用程序添加一些声音。在本教程中我们将使用HTML5音频DOM元素，因此首先您需要有一个支持HTML5的浏览器（我们推荐GoogleChrome）。我们可以将这个音频DOM元素添加到HTML和我们的控制器中。但由于我们主要使用控制器来与这个音频DOM元素进行交互，所以在控制器中创建它更为合适。现在我们在PlayerController中创建一个音频DOM元素。我们将把它存储在范围上，然后——正如您已经了解到的那样——通过$scope对象将视图连接到控制器。app.controller('PlayerController',['$scope',function($scope){$scope.audio=document.createElement('audio');}]);这个设定现在可能有点无聊，因为它不能做什么。我们将在本系列的下一篇文章中介绍“获取”数据，现在我们将从特定的.mp4URL开始。仍然在此PlayerController中，将音频文件的src属性指定为您可以访问的.mp4URL。为方便起见，这里我们使用存储在我们自己服务器上的NPR音频文件，但您可以指向任何URL。现在设置你的音频src地址如下：$scope.audio.src='/media/npr.mp4';}]);TryPlayPlayingaudio:false(请到英文原文测试“播放”按钮)音频不会自己播放，我们有让它发挥。为此，我们可以简单地使用$scope.audio.play()并且HTML5音频DOM元素将开始播放mp4媒体流。我们可以为用户提供一个交互元素：创建一个按钮并将其绑定到$scope中的一个动作。在下一篇文章中我们将更深入地介绍这一点，但首先看一下上面示例中视图的HTML：

PlayStopPlayingaudio:{{playing}}