1
すべての変更時に永続化したい "$scope.postits"の配列があります。ですから、この要素に$scope.$watchCollectionを入れて、変更を待ち受け、データを保存します。問題は、$ watchがページロードで3回トリガされることです（私のテスト配列には3つのエントリがあります）。 これを防ぐ方法は？私のコードに何が問題なのですか？
ビュー：
<div ng-controller="postitController as postit" class="container animate-bottom">
<h2>Post-it !</h2>
<div class="btn-container">
<button ng-click="addPostit()" id="add-new-note" class="btn btn-primary">Add postit</button>
</div>
<div class="post-it-container">
<div ng-repeat="postit in postits" class="postit">
<a ng-click="removePostit(postit)" class="delete-postit glyphicon glyphicon-remove"></a>
<textarea ng-model="postit.content" ></textarea>
</div>
<div ng-if="postits.length==0" class="no-postit well lead">Keep cool and have a beer there's no postit here !</div>
</div>
</div>
JSコントローラ：
$scope.$watch("postits", function (newValue, oldValue) {
//this prevent $watch to be triggered on init
if(newValue === oldValue || oldValue === undefined ){
console.log("return") ;
return;
}
console.log("watch triggered") ;
console.log(oldValue);
console.log(newValue);
storage.save();
},true);
その溶液であり：
app.controller('postitController', function($scope, $http, $timeout) {
$scope.postitsLoaded = false;
var storage = {
endpoint: "localhost/backend/ws.php",
get: function() {
$http({
method: 'GET',
url: this.endpoint
}).then(function successCallback(response) {
$scope.postits = response.data;
$scope.postitsLoaded = true;
console.log("init done") ;
}, function errorCallback(response) {
console.log(response);
});
},
save: function() {
$http({
method: 'POST',
url: this.endpoint,
data: "postits="+ angular.toJson($scope.postits),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function successCallback(response) {
console.log(response);
}, function errorCallback(response) {
console.log(response);
alert("error");
});
}
}
$scope.$watchCollection("postits", function (newValue, oldValue) {
if(newValue === oldValue || !$scope.postitsLoaded){
console.log("return") ;
return;
}
console.log("watch triggered") ;
storage.save();
});
$scope.addPostit = function() {
$scope.postits.push({id:100,content:"foobar"});
storage.save();
};
$scope.removePostit = function(postit) {
$scope.postits.splice($scope.postits.indexOf(postit), 1) ;
storage.save();
};
storage.get();
});