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

Bertha 。 2022-07-13 04:43 192阅读 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");
        };
    
    }]);