AngularJS Scope(作用域)
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带,当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性。
Scope 是一个对象,有可用的方法和属性。
Scope 可应用在视图和控制器上。
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>{{greeting}}</h1>
<button ng-click='sayHello()'>点我</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Runoob";
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.name + '!';
console.log("aaaaa")
};
});
</script>
</body>
当HTML DOM 中有多个作用域,你就需要知道你使用的 scope 对应的作用域是哪一个。
当我们使用 ng-repeat 指令时,每个重复项都访问了当前的重复对象,每个
- 元素可以访问当前的重复对象,这里对应的是一个字符串, 并使用变量 x 表示。
-
<body> <div ng-app="myApp" ng-controller="myCtrl"> <ul> <li ng-repeat="x in names">{{x}}</li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names=["aa","bb","cc"] }); </script> </body>
根作用域 ——$rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。
将 $rootScope 作为参数传递,可在应用中使<body> <div ng-app="myApp" ng-controller="myCtrl"> <h1>{{lastname}} 家族成员:</h1> <ul> <li ng-repeat="x in names">{{x}} {{lastname}}</li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $rootScope) { $scope.names = ["Emil", "Tobias", "Linus"]; $rootScope.lastname = "Refsnesssss"; }); </script> </body>
AngularJS 控制器
<div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); </script>
应用解析:
AngularJS 应用程序由 ng-app 定义。应用程序在内运行。
ng-controller=“myCtrl” 属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中, $scope 是一个应用对象(属于应用变量和函数)。
控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。AngularJS 过滤器
过滤器可以使用一个管道字符(|)添加到表达式和指令中。
currency:格式化数字为货币格式。
filter:从数组项中选择一个子集。
lowercase:格式化字符串为小写。
uppercase:格式化字符串为大写。
orderBy:根据某个表达式排列数组。var app = angular.module('myApp', []); app.controller('personCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; } });