Comment utiliser les services angulaires 1.x pour mettre à jour un composant d'un autre?

J'ai donc un composant parent qui contient une tonne de composants plus petits. L'idée générale est que j'ai besoin d'un composant pour prendre les données dans une entrée et l'afficher sur un autre composant. Voilà ce que j'ai qui ne fonctionne pas tout à fait, plus de détails sur le problème après:Comment utiliser les services angulaires 1.x pour mettre à jour un composant d'un autre?

const app = angular.module('app', []); 

app.service('dataService', function() { 
    let data = { 
    key1: "", 
    key2: "", 
    key3: { 
     key4: 0, 
     key5: 0 
    } 
    } 

    this.getKey1 = function() { 
    return data.key1; 
    } 

    this.updateKey1 = function(str) { 
    data.key1 = str; 
    } 
} 

app.component('display', { 
    controller: displayController, 
    template: '<p>{{ keyOne }}</p>' 
}); 

app.component('input', { 
    controller: inputController, 
    template: '<input ng-model="$ctrl.key1" ng-change="sendKey1()">' 
} 

function displayController($scope, dataService) { 
    const vm = this; 
    const self = $scope; 
    vm.$onInit = onInit; 
    function onInit() { 
    self.keyOne = dataService.getKey1(); 
    } 
} 

function inputController($scope, dataService) { 
    const vm = this; 
    const self = $scope; 
    vm.$onInit = onInit; 
    function onInit() { 
    self.sendKey1 = function() { 
     dataService.updateKey1(vm.key1) 
    } 
}

donc la mise à jour fonctionne, mais il ne passe pas à l'élément d'affichage. Si je consigne l'objet de données après l'avoir mis à jour, il est correct mais n'apparaît pas sur la vue.

Source

2017-10-11 Bird Dad

vous mettez à jour une chaîne data.key1 = str; dans le

let data = { key1: "", key2: "", key3: { key4: 0, key5: 0 } }

angulaire ne lie pas les chaînes entre les composants, ne lie les objets.

voir ici https://plnkr.co/edit/wfwyyGpcMKOSHGFdg2DS?p=preview

var app = angular.module('plunker', ['ngRoute', 'ngAnimate', 'ngSanitize']); 
 

 
app.service('dataService', function() { 
 
    let data = { 
 
    key1: "", 
 
    key2: "", 
 
    key3: { 
 
     key4: 0, 
 
     key5: 0 
 
    } 
 
    } 
 

 
    this.getData = function() { 
 
    return data; 
 
    } 
 

 
    this.updateKey1 = function(str) { 
 
    data.key1 = str; 
 
    } 
 
}); 
 

 

 

 
app.component('inputc', { 
 
    controller: inputController, 
 
    template: '<input ng-model="$ctrl.key1" ng-change="sendKey1()">' 
 
}); 
 

 
app.component('display', { 
 
    controller: displayController, 
 
    template: '<p>{{ data.key1 }}</p>' 
 
}); 
 

 
function displayController($scope, dataService) { 
 
    const vm = this; 
 
    const self = $scope; 
 
    vm.$onInit = onInit; 
 

 
    function onInit() { 
 
    self.data = dataService.getData(); 
 
    } 
 
} 
 

 
function inputController($scope, dataService) { 
 
    const vm = this; 
 
    const self = $scope; 
 
    vm.$onInit = onInit; 
 

 
    function onInit() { 
 
    self.sendKey1 = function() { 
 
     dataService.updateKey1(vm.key1) 
 
    } 
 
    } 
 
}

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link href="style.css" rel="stylesheet" /> 
 
    <script src="https://code.angularjs.org/1.6.2/angular.js"></script> 
 
    <!-- By setting the version to snapshot (available for all modules), you can test with the latest master version --> 
 
    <!--<script src="https://code.angularjs.org/snapshot/angular.js"></script>--> 
 
    <script src="https://code.angularjs.org/1.6.2/angular-route.js"></script> 
 
    <script src="https://code.angularjs.org/1.6.2/angular-animate.js"></script> 
 
    <script src="https://code.angularjs.org/1.6.2/angular-sanitize.js"></script>  
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <inputc></inputc> 
 
    <display></display> 
 
    </body> 
 
    
 
    
 

 
</html>

Source

2017-10-11 14:40:45 adutu

merci qui fait sens et fonctionne parfaitement –

Jetez un oeil à cet article: https://www.aurorasolutions.io/blog/angularjs-cross-component-communication/

Explique votre question passe dans une bonne façon.

J'espère que ça aide!

Source

2017-10-11 14:07:32

Jetez un oeil à A Tale of Frankenstein and Binding to Service Values in Angular.js.

Voici le résumé rapide de ce qui se passe:

displayControllerself.keyOne = dataService.getKey1() exécute. Cela affecte une chaîne vide à $scope.keyOne.
Dans la vue, l'expression {{ keyOne }} observe $scope.keyOne pour les modifications. Il évalue initialement à "", donc une chaîne vide est présente dans la vue.
inputController modifie dataService.data.keyOne pour une valeur quelconque, telle que hello world.
Dans la vue, l'expression {{ keyOne }} évalue à nouveau $scope.keyOne pour les changements dans le cadre du cycle de digestion. Problème:$scope.keyOne est toujours une chaîne vide! displayController ne sait pas récupérer la dernière valeur de dataService.data.keyOne.

Heureusement, le correctif est simple. Vous avez juste besoin d'obtenir une référence à l'objet data afin que vous puissiez évaluer correctement data.keyOne lorsque vous regardez les changements:

app.service('dataService', function() { 
    let data = { 
    key1: "" 
    } 

    //Expose the data object 
    this.getData = function() { 
    return data; 
    } 
} 

app.component('display', { 
    controller: displayController, 
    //Evaluate the current value of keyOne in the data object 
    template: '<p>{{ data.keyOne }}</p>' 
}); 

function displayController($scope, dataService) { 
    const vm = this; 
    const self = $scope; 
    vm.$onInit = onInit; 
    function onInit() { 
    //Get a static reference to the data object. 
    //The data object itself shouldn't change, but its properties will. 
    self.data = dataService.getData(); 
    } 
}

Source

2017-10-11 14:50:03

Comment utiliser les services angulaires 1.x pour mettre à jour un composant d'un autre?

Répondre

Questions connexes