C.2 $scope

优质
小牛编辑
126浏览
2023-12-01

$scope是连接视图与控制器的枢纽。在上一节中我们通过data-ng-init指定数据,但如何动态指定数据呢?这就需要$scope的帮助。

function petController($scope){
    $scope.pets = [
        {name: 'Dog'},
        {name: 'Cat'},
        {name: 'Rabbit'},
        {name: 'Parrot'}
    ];
}

上面是一个简单的控制器,通过data-ng-controller将其与视图绑定:

<div data-ng-controller="petController">
...
</div>

这样在上述<div>标签内部就都可以通过pets来访问数据了,如:

<div data-ng-controller="petController">
<ul>
<li data-ng-repeat="pet in pets | orderBy:'name'">{{ pet.name }}</li>
</ul>
</div>

值得注意的是,pets的作用域仅限于上述<div>标签内部,在外部是无法访问到的。

$scope可以有任意多的属性,只要你喜欢, 同时相应的变量也可以在相应的区间使用。