本网站只能被运行在支持JavaScript脚本的环境中

第三节 AngularJS中的作用域

在上一节中,我们提到了$scope。该变量代表控制器中的作用域对象。通过该对象的使用,我们可以添加、修改或删除只在该作用域中有效的变量、对象或函数。

<!DOCTYPE html>
<html>
<head>
<title>AngularJS使用示例</title>
<script src="angular.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script>
var MyApp = angular.module('MyApp', []);
MyApp.controller('SampleCtrl', ['$scope', function ($scope) {
    $scope.message = "我的提示信息!";
    $scope.value1=0;
    $scope.value2=0;    
    $scope.plus = function(value1, value2) {
        return (parseInt(value1) + parseInt(value2));
    }
}]);
</script>
</head>
<body ng-app="MyApp">
    <div class="container">
        <div ng-controller="SampleCtrl">
            <div class="bg-primary">
                <p>{{message}}</p>
            </div>
            <div class="bg-info">
                <input type="text" ng-model="value1"> + <input type="text" ng-model="value2"> = {{plus(value1,value2)}}
            </div>
        </div>
    </div>
</body>
</html>

在脚本代码中,$scope.message、$scope.value1以及$scope.value2为仅在控制器作用域中有效的变量、$scope.plus为仅在控制器作用域中有效的函数。

表单输入

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('SampleController',function ($scope) {
    $scope.text = 'TextBox';
    $scope.checkbox = true;
    $scope.radio = 'FUGA';
    $scope.select = 'bar';
});
</script>
</head>
<body>
<form ng-controller="SampleController">
    <input type="text" ng-model="text" />
    <input type="checkbox" ng-model="checkbox" />
    <input type="radio" name="hoge" value="HOGE" ng-model="radio" />HOGE
    <input type="radio" name="hoge" value="FUGA" ng-model="radio" />FUGA
    <select ng-model="select">
        <option value="foo">Foo</option>
        <option value="bar">Bar</option>
    </select>
</form>
</body>
</html>

事件绑定

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('SampleController',function ($scope) {
    $scope.click = function() {
        $scope.message = '按钮被点击!';
    };
});
</script>
</head>
<body>
<div ng-controller="SampleController">
    <button ng-click="click()">按钮</button>
    <p>{{message}}</p>
</div>
</body>
</html>

使用$watch函数监视值

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('SampleController',function ($scope) {
    $scope.hoge = 0;
    $scope.fuga = 0;
    $scope.sum = 0;
    $scope.$watch('hoge + fuga',function(newValue,oldValue){
        console.log(newValue);
        console.log(oldValue);       
        $scope.sum =$scope.hoge + $scope.fuga;
    });
});
</script>
</head>
<body  ng-controller="SampleController">
hoge : <input type="number" ng-model="hoge" /><br />
fuga : <input type="number" ng-model="fuga" /><br />
<p>合计: {{sum}}</p>
</body>
</html>
页面打开时
输入hoge值
输入fuga值

当需要对多个值的变化同时进行监视时,可以使用$watch函数。

$watch函数采用两个参数,第一个参数为需要监视的值,可以为表达式,可以为函数,代码如下所示:

$scope.$watch(function() {
    return $scope.hoge + $scope.fuga;
}, 
function(newValue,oldValue){  
    console.log(newValue);
    console.log(oldValue);     
    $scope.sum =$scope.hoge + $scope.fuga;
});

第二个参数值为当监视到值发生变化时需要执行的回调函数,该回调函数可以使用两个参数值,第一个参数值为变化后的值,第二个参数值为变化前的值。