scope对象 · angular

[TOC] ## 添加$scope对象属性 #### 项目结构【以及bower.json内容】 ![](https://box.kancloud.cn/2016-09-08_57d04c4ca417f.png) #### app.js ~~~js //创建模块 angular.module('myapp',['ngSanitize']); ~~~ #### index.js ~~~js //创建控制器c1 angular.module('myapp').controller('c1',['$scope',function ($scope) { //创建$scope对象的属性name $scope.name='hzj'; // 创建$scope对象的属性text，但是字符串的值为一个html标签 $scope.text='<hr>'; }]); ~~~ #### index.html【使用了ng-bind指令】 ~~~html <!DOCTYPE html>  <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="bower_components/angular/angular.min.js"></script>  <script src="js/app.js"></script>  <script src="js/index.js"></script> </head> <body>  <div ng-controller="c1">  <h1>{{name}}</h1>   <h1 ng-bind="name"></h1>  <h1>{{text}}</h1>  <h1 ng-bind="text"></h1> </div> </body> </html> ~~~ ## 通过表达式绑定$scope对象属性 * 如果不在指令属性里面绑定$scope对象属性那么需要添加{{}} ~~~html <h1>{{text}}</h1> ~~~ * 如果使用指令绑定$scope对象属性那么不需要添加{{}} ~~~html <h1 ng-bind="text"></h1> ~~~ * 如果在非angular指令绑定绑定$scope对象属性那么也需要添加{{}} ~~~html <img src="img/a.jpg" title="{{name}}"> ~~~ ## 添加$scope对象方法 #### index.js ~~~js //创建控制器c1 angular.module('myapp').controller('c1', ['$scope', function ($scope) { //创建$scope对象的属性 $scope.name = 'hzj'; //创建$scope对象的方法，也就是函数类型 // 一把情况下方法都会绑定到对应的html事件上面。 // 虽然表达式可以执行方法，但是最好不要这么做，因为方法一般都是由事件驱动。 // 而表达式就是为了显示一个结果 $scope.add = function () { //使用一个add方法改变 $scope.name的属性值，切记这里可不是使用this //this.name='QQ';这样是错误的 $scope.name = 'QQ'; }; }]); ~~~ ## 通过表达式绑定$scope对象方法 #### index.html ~~~html <!DOCTYPE html>  <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="bower_components/angular/angular.min.js"></script>  <script src="js/app.js"></script>  <script src="js/index.js"></script> </head> <body>  <div ng-controller="c1">  <h1>{{name}}</h1>   <h1>{{add()}}</h1> </div> </body> </html> ~~~ ## 在事件中绑定$scope对象方法 #### index.html ~~~html <!DOCTYPE html>  <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="bower_components/angular/angular.min.js"></script>  <script src="js/app.js"></script>  <script src="js/index.js"></script> </head> <body>  <div ng-controller="c1">  <h1>{{name}}</h1>  <button ng-click="add()">点击</button> </div> </body> </html> ~~~ ## 添加带参数的$scope对象方法 #### index.js ~~~js //创建控制器c1 angular.module('myapp').controller('c1', ['$scope', function ($scope) { // 创建$scope对象的属性 //不论你的$scope.result值是undefined还是null,在HTML上都会显示空白,不会报错 //所以不必设置初始值，这也是angular的一个容错优势 $scope.result; //创建$scope对象的方法，也就是函数类型 //并且带有参数a和b $scope.add = function (a, b) { //这里使用了Number转换为数字，免得变成字符串相加了 $scope.result = Number(a) + Number(b); }; }]); ~~~ #### index.html ~~~html <!DOCTYPE html>  <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="bower_components/angular/angular.min.js"></script>  <script src="js/app.js"></script>  <script src="js/index.js"></script> </head> <body>  <div ng-controller="c1">  <h1>{{result}}</h1>  <button ng-click="add(100,200)">点击</button> </div> </body> </html> ~~~ ## $scope对象方法的返回值return #### index.js ~~~js //创建控制器c1 angular.module('myapp').controller('c1', ['$scope', function ($scope) { //创建$scope对象的方法，也就是函数类型 //并且带有参数a和b //并且具备返回值 //其实这种带返回值的一般都会在控制器或者服务或者过滤器中使用， //并不会利用返回值，然后使用表达式来绑定返回值，因为表达式可以直接绑定scope属性 $scope.add = function (a, b) { return Number(a)+Number(b); }; }]); ~~~ #### index.html ~~~html <!DOCTYPE html>  <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="bower_components/angular/angular.min.js"></script>  <script src="js/app.js"></script>  <script src="js/index.js"></script> </head> <body>  <div ng-controller="c1">    <h1>{{add(100,200)}}</h1> </div> </body> </html> ~~~ ## $scope对象总结其实知道JavaScript原理的同学很容易理解，$scope对象创建方法也好，$scope对象创建属性也好，其实都是统称为$scope对象创建属性，因为JavaScript为弱类型，方法其实就是函数类型，当然还有数组、对象等等其它各种类型。所以这里我们并不希望使用函数类型绑定在表达式上面，函数类型通常都会出现在事件、服务、自定义过滤器等等场景中。 ## $scope对象属性和方法的继承 * 首先孩子无条件继承父亲的所有，父亲无法继承孩子的所有，这个规则在哪里都适用。 * 在angular中控制器作用域可以形成继承，主要是在HTML中体现，在JS代码中不会体现 #### index.js ~~~js //JS代码中并不能看出c1与c2的关系 //创建控制器c1 angular.module('myapp').controller('c1', ['$scope', function ($scope) { //创建$scope对象的属性 $scope.name = 'hzj'; }]); //创建控制器c2 angular.module('myapp').controller('c2', ['$scope', function ($scope) { //创建$scope对象的属性 $scope.sex = '男'; }]); ~~~ #### index.html ~~~html <!DOCTYPE html>  <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="bower_components/angular/angular.min.js"></script>  <script src="js/app.js"></script>  <script src="js/index.js"></script> </head> <body>  <div ng-controller="c1">  <h1>{{name}}</h1>     <div ng-controller="c2">  <h2>{{name}}</h2>  <h2>{{sex}}</h2> </div> </div> </body> </html> ~~~ ## 该死的全局变量怎么办$rootScope * 首先$rootScope首次出现，那么$rootScope是所有$scope的父亲,因此在$rootScope上面添加的属性，所有$scope都能使用 * 但是，不会直接在$rootScope上添加属性达到全局变量目的，中级部分我们学习了自定义服务和提供者我们就有另外的方案来处理全局变量了 * 但不管怎么说，千万不要在某个js文件里面直接来一个var xx='xx'做全局变量 ##从新回到app.js里面给$rootScope添加属性 #### app.js ~~~js //创建模块 angular.module('myapp',[]); //使用myapp模块的run方法,初始化$rootScope对象 angular.module('myapp').run(['$rootScope',function ($rootScope) { $rootScope.PI=3.14; }]); ~~~ #### index.js ~~~js //创建控制器c1 angular.module('myapp').controller('c1', ['$scope', function ($rootScope, $scope) { //创建$scope对象的属性 $scope.name = 'hzj'; }]); ~~~ #### index.html ~~~html <!DOCTYPE html>  <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="bower_components/angular/angular.min.js"></script>  <script src="js/app.js"></script>  <script src="js/index.js"></script> </head> <body>  <div ng-controller="c1">  <h1>{{name}}</h1>  <h1>{{PI}}</h1> </div> </body> </html> ~~~