与Angular 1.5进行数据绑定的一种方式就像双向

Question

I've read two blog posts : The first says that it works and prove it with a JSfiddle . 我已经阅读了两篇博客文章：第一篇文章说它可以工作，并用JSfiddle进行了证明。 The other says it works only with primitives. 另一个表示仅适用于原语。

EDIT after @estus response : now I make a copy because sorting is not an immutable function. @estus响应后编辑：现在我进行复制，因为排序不是不变的函数。 The problem is different : change in the controller is not reflected in the View with One-way , but it is with Two-way. 问题是不同的： 控制器的更改不会在单向视图中反映出来，而在双向视图中会反映出来 。

I've worked on it and also made a JSFiddle . 我已经做了工作，还制作了一个JSFiddle 。 My 1-way data-binding works like a two-way with objects - but correctly with primitive. 我的单向数据绑定与对象的双向工作类似，但与原始对象是正确的。 It works when I use a ng-click that makes a $digest(), but not directly at the controller creation. 当我使用创建$ digest（）的ng-click时有效，但是在控制器创建时不直接使用。 What is wrong ? 怎么了？

Parent : 家长：

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

JS : 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 : '<'
   }
});

Notice that the exemple I show up also requires a button and ng-click() to modify the View. 请注意，我出现的示例还需要一个按钮和ng-click()来修改视图。

Answer 1

One-way binding isn't an issue here, it may work as advertised for both primitives and objects. 单向绑定在这里不是问题，它可以像为原语和对象宣传的那样工作。

The problem is caused by Array.prototype.sort() : 该问题是由Array.prototype.sort()引起的：

The sort() method sorts the elements of an array in place and returns the array. sort（）方法对数组中的元素进行适当排序并返回该数组。

this.users in usersComponent scope and $scope.users in AppCtrl scope refer to the same object. this.users在usersComponent范围和$scope.users在AppCtrl范围指的是同一个对象。 Once it is sorted with this.users.sort() ( this.users = ... doesn't do anything here), it is modified in both scopes. 一旦使用this.users.sort()对其进行排序（ this.users = ...在此不执行任何操作），则会在两个范围内对其进行修改。 To change this behaviour, modify a copy and not the original object: 若要更改此行为，请修改副本而不是原始对象：

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

与Angular 1.5进行数据绑定的一种方式就像双向

问题描述

1 个解决方案

解决方案1
2 2016-04-24 21:14:11

与Angular 1.5进行数据绑定的一种方式就像双向

问题描述

1 个解决方案

解决方案1 2 2016-04-24 21:14:11

解决方案1
2 2016-04-24 21:14:11