Question

我试图理解为什么以下代码只会记录

Array []
Array [object, object]

当我期待

时提交表格

Array [object, object]
Array [object, object]

https://gist.github.com/anonymous/b5a9dd7634ee97bc01cf

不应该

$scope.posts.push({
        title: $scope.title,
        link: $scope.link, 
        upvotes: 0
    });

立即更新服务？

任何建议都将不胜感激，谢谢

angular.module('flapperNews', [])
  .factory('postsFactory', [function(){
    // Modularize posts frontend storage for better mock testing and independency of scope
    var posts_factory_object = {
        posts_list: []
    };
    return posts_factory_object;
  }])
  .controller('MainCtrl', [
    '$scope',
    'postsFactory',
    function($scope, postsFactory){

      // Bind scope.posts to postsFactory.posts_list
      $scope.posts = postsFactory.posts_list;

      // Variable pseudo post data for test
      $scope.posts = [
        {title: 'post 1', upvotes: 5},

      ];

      // Frontend function for keeping track of state purely in frontend
      $scope.addPost = function(){
        // Check if inputted string is undefinied or empty
        if (!$scope.title || $scope.title ===''){ return; }

        $scope.posts.push({
            title: $scope.title,
            link: $scope.link, 
            upvotes: 0
        });
        $scope.title = '';
        $scope.link = '';

        console.log(postsFactory.posts_list);
        console.log($scope.posts);
      };


    }]);

Answer 1

您的服务未获得更新，因为您正在通过执行以下操作覆盖postsFactory.posts_list与$scope.posts持有的服务对象$scope.posts = [ {title: 'post 1', upvotes: 5}, ];的引用：

$scope.posts

因此，对$scope.posts.push({title: 'post 1', upvotes: 5});所做的任何更改都不会反映在服务中的对象中，因为它们都指向不同的引用。您可以通过执行以下操作来验证： -

{{1}}

只要两个属性都具有相同的引用，您就可以看到两侧反映的更改。

Answer 2

  $scope.posts = postsFactory.posts_list;

与创建绑定不同。您实际上只是将$ scope.posts的参考值设置为postsFactory.posts_list。然后使用

立即覆盖此引用

  // Variable pseudo post data for test
  $scope.posts = [
    {title: 'post 1', upvotes: 5},

  ];

所以现在$ scope.posts是一个完全不同的列表。 postFactory.posts_list是孤立的，不会在addPost函数中更新。

阅读有关AngularJS观察者的信息，这是您真正感兴趣的内容。

此外，双向数据绑定通常通过绑定模板中的内容（至少对于初学者）来添加 - 使用ng-bind或{{bindme}}语法

注入控制器的服务的双向绑定何时解决？

2 个答案: