<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Scope(作用域)</title>
<script src="js/Angular.js"></script>
</head>
<body>
<div ng-app="scopeApp" id="scopeApp" ng-controller="scopeController">
<div>
<h1>{{carname}}</h1>
<h2>{{hello}}</h2>
<button ng-click='sayHello()'>点我问好</button>
</div>
<div>
<h4>repeat重复读取</h4>
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<div>
<h3>{{lastName}}成员</h3>
<ul>
<li ng-repeat="x in names">{{x}} {{lastName}}</li>
</ul>
</div>
<script>
var app = angular.module('scopeApp', []);
app.controller('scopeController', function($scope) {
$scope.carname = "Join";
$scope.sayHello = function(){
$scope.hello = "hello,"+$scope.carname;
}
$scope.names = ['join','tom','cat'];
$scope.lastName = "yelisob"
});
</script>
</div>
<hr />
<div>
<h3>scope解释</h3>
当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递:<br />
scope 是模型。<br />
scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。<br />
</div>
<div>
<h3>scope的作用范围</h3>
当我们使用 ng-repeat 指令时,每个重复项都访问了当前的重复对象:<br />
<h5>根作用域</h5>
所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。<br />
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用<br />
创建控制器时,将 $rootScope 作为参数传递,可在应用中使用:
</div>
<div>
<h3></h3>
</div>
<div>
<h3></h3>
</div>
</body>
</html>
angularJs 之 Scope(作用域)
最新推荐文章于 2021-06-16 05:59:47 发布