AngularJS $scope.$regarder sur objet json ne fonctionne pas à l'intérieur de la directive
Je suis absent quelque chose d'évident ici. Dans mon directive j'ai un travail à deux sens de la liaison de données, cependant je n'arrive pas à utiliser $scope.$watch() pour surveiller les changements qui peuvent se produire sur la directive de la portée parent js objet.
Comme vous pouvez le voir, lorsque j'essaie d'utiliser $regarder sur attrs.dirModel la valeur est undefined, et rien n'est plus regardé, même si je suis la modification de l'objet après un bref délai. J'ai aussi essayé d'utiliser (et de ne pas utiliser) le vrai drapeau sur la somme de regarder la déclaration.
HTML:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<div ng-app="test" ng-controller="MainCtrl">
<dir dir-model="model"></dir>
<p>{{model.tbdTwoWayPropA}}</p>
</div>
<script type="text/ng-template" id="template">
<div class="test-el">{{dirModel.tbdTwoWayPropB}}</div>
</script>
JS:
var app = angular.module('test', []);
app.controller("MainCtrl", [
"$scope", "$timeout",
function($scope, $timeout){
$scope.model = {
tbdTwoWayPropA: undefined,
tbdTwoWayPropB: undefined,
tbdTwoWayPropC: undefined
}
//TBD Ajax call
$timeout(function(){
//alert("Model updated, but $scope.$watch isn't seeing it.");
$scope.model.tbdTwoWayPropA = 1;
$scope.model.tbdTwoWayPropB = 30;
$scope.model.tbdTwoWayPropC = [{ a: 1 },{ a: 2 },{ a: 3 }];
}, 2000)
}
]);
app.directive('dir', [
"$timeout",
function($timeout) {
return {
restrict: "E",
controller: function($scope){
$scope.modifyTwoWayBindings = function(){
//Two-way bind works
$scope.dirModel.tbdTwoWayPropA = 2;
}
$timeout(function(){
$scope.modifyTwoWayBindings();
}, 4000);
},
scope: {
dirModel: '='
},
template: $("#template").html(),
replace: true,
link: function($scope, element, attrs) {
$scope.$watch( attrs.dirModel, handleModelUpdate, true);
//alert(attrs.dirModel);
function handleModelUpdate(newModel, oldModel, $scope) {
alert('Trying to watch mutations on the parent js object: ' + newModel);
}
}
}
}]);
OriginalL'auteur BradGreens | 2013-03-11
Vous devez vous connecter pour publier un commentaire.
Puisque vous utilisez le '=', vous disposez d'un local directive champ d'application de la propriété
dirModel
. Seulement $montre que:eh bien, il est mentionné sur le pas-si-facile-à-comprendre les directives de la page en vertu de la Directive relative à la Définition de l'Objet". Voir aussi stackoverflow.com/questions/14050195/..., stackoverflow.com/questions/14908133/... et stackoverflow.com/questions/14049480/... (voir la section "directives" près du bas).
Je l'ai lu de nombreuses fois ;). Je pense que maintenant je suis spécialement intéressé à en apprendre exactement ce angulaire méthodes d'accepter cette représentation sous forme de chaîne de l'attribut en tant que paramètre. c'est à dire, $observer('attr', fct), $('attr','val'), $watch('attr', fct), etc... La représentation de chaîne est une sorte de magique.
$watch est une méthode définie dans Portée. Si le premier argument $watch est une chaîne de caractères, est évaluée par rapport à l'étendue (dans ce cas, la directive de l'isoler de la portée). $regarder ne pas regarder/observer des attributs, il ne peut que regarder/observer les propriétés de l'étendue (ou il peut être donné une fonction de "regarder"). $observer() et $sont des méthodes sur les Attributs de l'objet, de sorte qu'ils ne peuvent que regarder/observer/jeu de valeurs d'attribut (à l'aide de l'normalisé des noms d'attributs).
Très utile et très apprécié.
OriginalL'auteur Mark Rajcok