[angular]服务之2$scope之$watch、$watchGroup、$watchCollection

最新推荐文章于 2020-04-03 13:02:05 发布

灵眼儿上方

最新推荐文章于 2020-04-03 13:02:05 发布

阅读量1.3k

点赞数

分类专栏： java相关文章标签： angular scope watch

本文链接：https://blog.csdn.net/liyanq528/article/details/53870244

版权

java相关专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" ng-app="testServiceScopeWatch">
<head>
    <meta charset="UTF-8">
    <title>测试$scope中的$watch方法</title>
    <script src="../frameWork/angular.js"></script>
    <script src="../testService/testServiceScopeWatch.js"></script>
</head>
<body>
<h3>内容1:监视简单model，输入框和按钮都能执行$watch</h3>
<div ng-controller="ctr1">
    <input ng-model="name">
    <input ng-model="newValue">
    <button ng-click="onChange()">通过按钮执行</button>
</div>

<h3>内容2:监视对象，第三参数为false(默认)，可以取消监视</h3>
<div ng-controller="ctr2">
    <input ng-model="user.name">
    <input ng-model="newValue">
    <button ng-click="onChange()">通过按钮执行</button>
    <button ng-click="onCancelWatch()">取消监视</button>
</div>

<h3>内容3:$watchGroup监视，第一个参数是一个表达式的数组或者返回表达式的数组的函数</h3>
<div ng-controller="ctr3">
    <input ng-model="user.name">
    <input ng-model="newValue">
    <button ng-click="onChange()">通过按钮执行</button>
    <button ng-click="onCancelWatch()">取消监视</button>
</div>

<h3>内容4:$watchCollection监视，第一个参数必须对象或者返回对象的函数</h3>
<div ng-controller="ctr4">
    <input ng-model="newValue">
    <button ng-click="onChange()">通过按钮执行</button>
    <button ng-click="onCancelWatch()">取消监视</button>
</div>
</body>
</html>

/**
 * 摘要：由于service在angular中的地位非常重要，所以得认真对待。
 *      服务是一个单例对象，与应用同生死，能够注入，是controller之间通讯的主要工具。
 *      (通信还可以用$emit,$broadcast,$on的形式，但这个方式有局限，两个controller得有关系，以后研究).
 *      服务依赖provider,这个provider一般是module.
 * service实例分析第二篇：$scope之$watch、$watchGroup、$watchCollection
 * Created by liyanq on 16/12/25.
 */

/**$scope原型里面有许多重要的函数，其中$new应该不会显示去调用的，不看了。$watch肯定用的不少，所以先实验它。
 * 1，原型：$watch: function(watchExp, listener, objectEquality, prettyPrintExpression){}；
 * 2，参数：watchExp(必须)：{(function()|string)}，可以字符串表达式，也可以带当前scope为参数的函数
 *        - `string`: Evaluated as {@link guide/expression expression}
 *        - `function(scope)`: called with current `scope` as a parameter.
 * 3，参数：listener(必须):function(newVal, oldVal, scope),观察的表达式变化的时候调用的函数。
 * 4，参数：objectEquality(非必须):是否监视个对象,默认为false
 * 5，$scope.$digest().会执行所有的同$scope下的$watch。
 *    但会出错$apply already in progress,换了$rootScope也一样。
 *    原因：http://blog.csdn.net/aitangyong/article/details/48972643
 *    $digest、$apply、$$phase这些属性或者方法其实都是$scope中的私有的，最好不要使用。
 * 6，$watch一个对象。
 *    如果要监视对象的变化(地址改变)，$watch对象名，第三个参数默认；
 *    如果监测对象中某一属性，可以写user.name的形式，第三个参数默认；
 *    如果监测对象中全部属性，$watch对象名，第三个参数true；
 * 7，$watchGroup，第一个参数是一个表达式的数组或者返回表达式的数组的函数。
 * 8，$watchCollection；
 *     js中数组也是对象，但按照$watch一个对象的方式，只有数组引用变了才能监听变化，增加删除$watch监听不到，所以就有了$watchCollection。
 *     function(obj, listener)：第一个参数必须对象或者返回对象的函数。
 * */

var testServiceScopeWatchModule = angular.module("testServiceScopeWatch", []);
testServiceScopeWatchModule.controller("ctr1", ["$scope", function ($scope) {
    $scope.name = "hello";
    $scope.counter = 0;
    console.log("ctr1位置1:" + $scope.counter);//0
    $scope.$watch("name", function () {//在位置2后执行一次
        console.log("ctr1.$scope.$watch.name执行了一次");
        $scope.counter = $scope.counter + 1;
    });
    console.log("ctr1位置2:" + $scope.counter);//0
    $scope.onChange = function () {
        console.log("ctr1位置3:" + $scope.counter);
        $scope.name = $scope.newValue;
    };
}]).controller("ctr2", ["$scope", function ($scope) {
    $scope.user = {
        name: "hello",
        age: 28
    };
    $scope.counter = 0;
    console.log("ctr2位置1:" + $scope.counter);//0
    var watchObjListener = function (newVal, oldVal) {//在位置2后执行一次
        console.log("ctr2.$scope.$watch.user执行了一次");
        $scope.counter = $scope.counter + 1;
    };
    var cancelWatch = $scope.$watch("user", watchObjListener);
    console.log("ctr2位置2:" + $scope.counter);//0
    $scope.onChange = function () {
        console.log("ctr2位置3:" + $scope.counter);
        $scope.user = {
            name: $scope.newValue,
            age: 30
        };
    };
    $scope.onCancelWatch = function () {
        cancelWatch();
        console.log("ctr2取消了监听user");
    };
}]).controller("ctr3", ["$scope", function ($scope) {
    $scope.user = {
        name: "hello",
        age: 28
    };
    var watchGroupListener = function (newVal, oldVal) {//在位置2后执行一次
        console.log("ctr3.$scope.$watchGroup.user执行了一次");
    };
    var cancelWatch = $scope.$watchGroup(["user"], watchGroupListener);
    $scope.onChange = function () {
        $scope.user = {
            name: $scope.newValue,
            age: 30
        };
    };
    $scope.onCancelWatch = function () {
        cancelWatch();
        console.log("ctr3取消了监听user");
    };

}]).controller("ctr4", ["$scope", function ($scope) {
    $scope.users = [];
    $scope.users[0] = "hello";
    var watchCollectionListener = function (newVal, oldVal) {//在位置2后执行一次
        console.log("ctr4.$scope.$watchGroup.user执行了一次");
        console.log(newVal);
    };
    var cancelWatch = $scope.$watchCollection("users", watchCollectionListener);
    $scope.onChange = function () {
        $scope.users.unshift($scope.newValue);
    };
    $scope.onCancelWatch = function () {
        cancelWatch();
        console.log("ctr4取消了监听user");
    };

}]);