angularjs的作用域（ng-repeat 和 ng-controller）

ng-repeat

ng-repeat：遍历数组
1. 用法：ng-repeat=”item in array”
这是ng-repeat自己的语法，item：数据中的每一项；array：要遍历的数组
item和array都可以根据实际情况来改的
2. ng-repeat都做了什么？？
a. 为数组中的每一项建立一个作用域，并把需要的值放到这个作用域上
（现在就有了一组子作用域）
b. 获取模板，并把每一作用域和模板做一次绑定，获得一个html元素，
（现在就有了绑定过作用域的html元素)

html结构

1. ng-repeat: 根据数组中的每一项重复生成模板中的内容， 模板中填坑时用到的数据就是数组中的每一项
2. user代表data中的每一项，只有在ng-repeat这个指令中可以使用
   在这里就是数组中的每一个对象(这里是对象哦，所以要user.name)

<table>
    //ng-class-even={col:true}也表示索引为偶数的列改变
    <tr ng-repeat="item in data" ng-class={"col":$even}>
        <td>{{item.name}}</td>
        <td>{{item.gender}}</td>
        <td>{{item.age}}</td>
        <td>{{$odd}}</td>
        <td>{{$even}}</td>
    </tr>
</table>

js代码

var app = angular.module("s9.app",[]);
app.run(function($rootScope){
    $rootScope.data = [
        {name:"张三",gender: "男",age: 10},
        {name:"李四",gender: "男",age: 20},
        {name:"王五",gender: "女",age: 30},
    ]
})

ng-controller

ng-controller 不是一个控制器，而是一个指令，作用：
1. 创建了一个空的作用域
2. 获取用app.controller函数在模块上创建的控制器
3. 有空的作用域，有控制器函数，用控制器初始化空作用域，往作用域上存放数据就有了一个有数据的作用域
4. 把作用域绑定到html标签上

html结构

<div ng-app="s9.app">
    <div ng-controller="MainController">
        <span ng-bind="name"></span><br>
        <input type="text" ng-model="name">
    </div><br><br>
<!--上下是两个作用域，互不影响-->
    <div ng-controller="MainController">
        <span ng-bind="name"></span><br>
        <input type="text" ng-model="name">
    </div>
</div>

js代码

var app = angular.module("s9.app",[]);

app.controller("MainController",function($scope){
    $scope["name"] = "I'm Main Controller Name";
})

ng-controller作用域嵌套

<div ng-app="s9.app">
    <div>
        <span>{{name}}</span>
        <span>{{root}}</span>
    </div>
    <!--如果当前作用域中没有，就会去它的原型中寻找-->
    <div ng-controller="MainController">
        <span>{{name}}</span>
        <span>{{main}}</span>
    </div><br><br>
    <div ng-controller="SubController">
        <span>{{name}}</span>
        <span>{{sub}}</span>
    </div><br><br>

</div>

js代码

var app = angular.module("s9.app",[]);
app.run(function($rootScope){
    $rootScope["name"] = "root";
    $rootScope["root"] = "from root";
});
app.controller("MainController",function($scope){
    $scope["name"] = 'main';
    $scope['main'] = 'from main';
});
app.controller("SubController",function($scope){
    $scope['name'] = 'sub';
    $scope['sub'] = 'from sub';
})

一个容易搞混的小问题

改变上面的input的输入内容，下面的input中的内容会给变，但是改变下面的输入内容，上面的就没有变化

html结构

<div ng-controller="MainController">
    <input type="text" ng-model="name"><br><br>
    <div ng-controller="SubController">
        <input type="text" ng-model="name">
    </div>
</div>

js代码

var app = angular.module("s9.app",[]);
app.controller("MainController",function($scope){
    $scope["name"] = "hello world";
})
app.controller("SubController",function($scope){
    $scope["sub"] = "haha";
});

解析：

1. SubController作用域包裹在MainController作用域中，所以SubController继承了父作用域中的属性和方法
2. SubController作用域中没有name属性，所以访问的是原型中的name
   原型中的name改变时，下面的input的value就会改变，但是
   下面的input的value改变时，改变的是自己的，不会影响它的原型

怎样解决这个小问题呢

将要绑定的内容作为对象的属性或方法存在

html

<div ng-controller="MainController">
    <input type="text" ng-model="data.name"><br><br>
    // 现在都属于同一个对象的属性了
    <div ng-controller="SubController">
        <input type="text" ng-model="data.name">
    </div>
</div>

js代码

var app = angular.module("s9.app",[]);
app.controller("MainController",function($scope){
    // 通过对象的属性绑定
    $scope["data"] = {
        name: "hello world"
    }
})
app.controller("SubController",function($scope){
    $scope["sub"] = "haha";
})