角度js中的$ scope.watchCollection仅触发一次

时间:2014-07-03 12:47:49

标签: javascript angularjs angularjs-scope

我有一个对象数组,其中有两个嵌套对象。结构如下。我有监视函数来观察extraCurricular嵌套对象的任何更新或推送或删除。但这些功能只触发一次。我对这些手表功能没有任何停止功能。所以我没有阻止它们。请让我知道我错在哪里

$ scope.class.student.extraCurriculars = {     游戏:[{         名称:'排球',         teamCount:10     },{         名称:'国际象棋',         teamCount:2     }],     艺术:[{             舞蹈:{                 类型:'Bharatham',                 teamCount:'1'             },             音乐:{                 类型:'Carnatic',                 teamCount:'1'             }]     } }

每个学生可以参加多场比赛,不止一种艺术。

**studentExtraCurriculum.html**

<div class="ui raised blue segment">
    <div class="ui accordion" ng-repeat="game in class.student[curSection - 1].extraCurriculars.games">
        <div class="title">
            <div class="ui green label">{{$index+1}}</div>
            <select ng-model="game.name" ng-options="game as game.name for game in gamesList">
                <option value="">{{gamesList.game.name}}</option>
            </select>
            <input type="text" size="3" placeholder="Team count" ng-model="game.teamCount "></input>
        </div>
    </div>
</div>
<div class="ui small button" ng-click="pushGames()">Add a Game</div>
<div class="ui raised blue segment">
    <div class="ui accordion" ng-repeat="art in class.student[curSection - 1].extraCurriculars.arts">
        <div class="title">
            <div class="ui green label">{{$index+1}}</div>
            <select ng-model="art.name" ng-options="art as art.name for game in artList">
                <option value="">{{artList.art.name}}</option>
            </select>
            <input type="text" size="3" placeholder="Team count" ng-model="art.teamCount "></input>
        </div>
    </div>
</div>
<div class="ui small button" ng-click="pushArts()">Add a Art</div>

MyController.js

 var extraCurriculumController = function($scope, $log, StudentService, $stateParams, ClassService, Modal, $compile, $window) {
function {
...
}
function {
...,
}
function _init(){
...
//Inside Init I have added watch functions
$scope.$watchCollection(
            "class.student[curSection - 1].extraCurriculars",
            function(newValue, oldValue) {
                console.log("Deep change bat");
                console.log("Old value");
                console.log(oldValue);
                console.log("New Value");
                console.log(newValue);
            }
        );
        $scope.$watchCollection(
            "class.student[curSection - 1].extraCurriculars",
            function(newValue, oldValue) {
                console.log("Deep change bowl");
                console.log("Old value");
                console.log(oldValue);
                console.log("New Value");
                console.log(newValue);
            }
        );

        //watch for shallow change in array
        $scope.$watch("class.student[curSection - 1].extraCurriculars",
            function(newValue, oldValue) {
                console.log("Shallow change bat");
                console.log("Old value");
                console.log(oldValue);
                console.log("New Value");
                console.log(newValue);
            }
        );
        $scope.$watch("class.student[curSection - 1].extraCurriculars",
            function(newValue, oldValue) {
                console.log("Shallow change bowl");
                console.log("Old value");
                console.log(oldValue);
                console.log("New Value");
                console.log(newValue);
            }
        );

        //deep change tree lookup
        $scope.$watch("class.student[curSection - 1].extraCurriculars",
            function(newValue, oldValue) {
                console.log("tree change bat");
                console.log("Old value");
                console.log(oldValue);
                console.log("New Value");
                console.log(newValue);
            },
            true
        );
        $scope.$watch("class.student[curSection - 1].extraCurriculars",
            function(newValue, oldValue) {
                console.log("tree change bowl");
                console.log("Old value");
                console.log(oldValue);
                console.log("New Value");
                console.log(newValue);
            },
            true
        );
//End of watch function
}

}

0 个答案:

没有答案