One-Way-Datenbindung mit Angular 1.5 funktioniert wie Zwei-Wege

Ich habe zwei Blog-Posts gelesen: Die first sagt, dass es funktioniert und beweisen Sie es mit einem JSfiddle. Die other says funktioniert nur mit Primitiven.One-Way-Datenbindung mit Angular 1.5 funktioniert wie Zwei-Wege

BEARBEITEN nach @estus Antwort: jetzt mache ich eine Kopie, weil das Sortieren keine unveränderliche Funktion ist. Das Problem ist anders: Änderung in der Steuerung wird nicht in der Ansicht mit One-Way reflektiert, aber es ist mit Zwei-Wege.

Ich habe daran gearbeitet und also made a JSFiddle. Meine 1-Way-Datenbindung funktioniert wie eine Zwei-Wege-mit-Objekten - aber richtig mit primitiven. Es funktioniert, wenn ich einen ng-Klick verwende, der ein $ digest() erstellt, aber nicht direkt bei der Controller-Erstellung. Was ist falsch ?

Parent:

<body ng-controller="AppCtrl"> 
    <users-component users="users"></users-component> 
    <button ng-click = "check()">Check current users in Parent Ctrl</button> 
</body>

JS:

function UserCtrl($scope){ 
    console.log('Component users at the controller start :', this.users); 
    this.sorting = function(){ 
     this.users = angular.copy(this.users).sort(); 
     console.log('Component users after sorting :', this.users); 
    }; 

    //Change does not appear on View with one-way, but does with Two-ways 
    this.users = angular.copy(this.users).sort(); 
    console.log('users in component after controller creation', this.users); 
} 

angular.module("demo", []) 
.controller('AppCtrl', function($scope){ 
    $scope.users = ['John', 'Jim', 'Albert', 'Luc', 'Sheldon']; 
    $scope.check = function(){ 
    console.log('Application Ctrl : current users', $scope.users); 
    } 
}) 
.component("usersComponent", { 
    template: '<ul><li ng-repeat = "user in $ctrl.users">{{user}}</li></ul>' 
    +'<button ng-click="$ctrl.sorting()">Sort users in Component Ctrl</button>', 
    controller : UserCtrl, 
    bindings:{ 
     users : '<' 
    } 
});

Beachten Sie, dass die exemple ich auch eine Schaltfläche angezeigt und ng-click() erfordert die Ansicht zu ändern.

Quelle

2016-04-24 Nicolas Zozol

Einseitige Bindung ist hier kein Problem, es funktioniert möglicherweise wie für Primitive und Objekte beworben.

Das Problem wird durch Array.prototype.sort() verursacht:

Die Sorte() Methode sortiert die Elemente eines Arrays an Ort und Stelle und gibt Array.

this.users in usersComponent Umfang und in $scope.usersAppCtrl Umfang beziehen sich auf das gleiche Objekt. Sobald es mit this.users.sort() sortiert ist (this.users = ... tut nichts hier), wird es in beiden Bereichen geändert. Um dieses Verhalten zu ändern, ändern Sie eine Kopie und nicht das Originalobjekt:

function UserCtrl($scope){ 
    console.log('Component users at the start :', this.users); 
    this.users = angular.copy(this.users).sort(); 
}

Quelle

2016-04-24 21:14:11 estus

Autsch, unveränderlich ... NICHT. Habe immer noch ein Problem mit der gleichen Frage. –

@NicolasZozol One-Way-Bindung sieht in Ordnung, zumindest in modernen Browsern http://jsfiddle.net/21fx2s3x/. Bitte, klären Sie, welche Art von Verhalten Sie davon erwarten. – estus

Die Benutzer sollten am Anfang der App sortiert werden. Wir müssen auf "Benutzer sortieren" klicken, um zu zeigen. –

One-Way-Datenbindung mit Angular 1.5 funktioniert wie Zwei-Wege

Antwort

Verwandte Themen