Question

我在AngularJS中遇到数据绑定问题。简而言之，我试图将工厂中的变量链接到我的视图（$ scope）。工厂（在我的完整实现中）监听特定的广播并更新变量，视图应该反映这一变化，但它没有。

我设法从许多其他代码中分离出问题。控制器调用的函数（setTrue）只是一个占位符，用于更困难的后端操作。

运行代码时，我希望看到＆＃34; true＆＃34;写在视图中。我不知道为什么视图仍然是＆＃34; false＆＃34;？

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<body ng-app="app">
    <div ng-controller="Fact">
        value: {{model}}<br/>
    </div>

    <script type="text/javascript">
        var app = angular.module("app", []);

        app.controller('Fact', ['$scope','Fact', function ($scope, Fact) {
          $scope.model = Fact.data;
          Fact.setTrue();
        }]);

        app.factory("Fact", function () {
            var Fact = {};
            Fact.data = false;

            Fact.setTrue = function () {
                Fact.data = true;
            };

            return Fact;
        });
    </script>
</body>

Plunker：http://plnkr.co/edit/IIq2H4gW1DBoe5zVPx0g

有谁可以告诉我我做错了什么？

修改

当我将上述代码更改为

时

$scope.model = Fact;

和

value: {{model.data}}

它突然起作用......但我不想把我的整个工厂放在我的范围内。

Answer 1

我对你使用工厂的方式感到非常惊讶。

你不应该做更像的事情：

(function() {
 angular.module("services")
.factory("dataService", function ($http) {

  var data = "";

  var getData = function() {
    return data;
  }

  var setData = function(newData) {
    data = newData;
  }

  return {
    getData: getData,
    setData: setData
  };

});

}）（）;

然后你只需要在控制器中调用

app.controller('Ctrl', ['$scope','dataService', function ($scope, dataService) {
      $scope.model.data = dataService.getData();
      dataService.setData("something");
    }]);

Answer 2

如您所知，以下代码段将正常运行。如您所见，我将返回的单例分配给范围值。从这里我可以在这个新的作用域对象上调用所有返回的方法。

＆＃13;

angular.module("app", [])
  .controller('appCtrl', ['$scope', 'Fact',
    function($scope, Fact) {
      $scope.model = Fact;
      $scope.model.setTrue();
    }
  ]).factory("Fact", function() {
    var Fact = {};
    Fact.data = false;

    Fact.setTrue = function() {
      Fact.data = true;
    };

    return Fact;
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="appCtrl">
    value: {{model.data}}
    <br/>
  </div>
</div>

＆＃13;

在你的情况下，我认为这将是实现你想要的正确方法。我假设您可以想到工厂将有大量关联的其他场景，并且可以访问控制器中的整个对象。

在下面的代码片段中，我将布尔值包装在一个对象中，并像分配给范围一样进行分配，但现在任何更改都将绑定到$ scope.model对象。

＆＃13;

angular.module("app", [])
  .controller('appCtrl', ['$scope', 'Fact',
    function($scope, Fact) {
      $scope.model = Fact.data
      Fact.setTrue();
      //$scope.model.setTrue();
    }
  ]).factory("Fact", function() {
    var Fact = {};
    Fact.data = {"value":false};

    Fact.setTrue = function() {
      Fact.data.value = true;
    };

    return Fact;
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="appCtrl">
    value: {{model.value}}
    <br/>
  </div>
</div>

＆＃13;

但是，如果您不想这样做并且只想将数据值分配给作用域，则需要在将值分配给作用域之前更改Fact工厂，或者将其包装在对象中将传递引用而不是值。应该注意的是，在您的代码中，您为$ scope.model分配了一个布尔值，但是它没有与Fact.data绑定，因此对Fact的任何更改都不会影响模型对象。

工厂和视图之间的Angularjs数据绑定

2 个答案: