Question

我已经阅读了两篇博客文章：first表示它有效，并以JSfiddle证明了这一点。 other says它仅适用于基元。

@estus响应后编辑：现在我复制了一份，因为排序不是一个不可变的函数。问题不同：控制器中的更改未反映在“单向视图”中，但它是双向的。

我已经和also made a JSFiddle进行了合作。我的单向数据绑定就像一个带有对象的双向 - 但正确地用于原始。当我使用ng-click创建$ digest（）时，它可以工作，但不能直接在控制器创建时使用。怎么了？

家长：

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

请注意，我显示的示例还需要一个按钮ng-click()来修改视图。

Answer 1

单向绑定在这里不是问题，它可以像原语和对象一样宣传。

问题是由Array.prototype.sort()：

引起的

sort（）方法对数组中的元素进行排序并返回数组。

this.users范围内的

usersComponent和$scope.users范围内的AppCtrl指的是同一个对象。一旦使用this.users.sort()进行排序（this.users = ...此处不执行任何操作），就会在两个范围中对其进行修改。要更改此行为，请修改副本而不是原始对象：

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

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

1 个答案: