Question

我有一个非常简单的预加载屏幕脚本，我需要从几个控制器获取。但是我不能让它自动更新变量，我不知道我做错了什么。

工厂：

myApp.factory("preloader", function(){

    var preload = {};

    preload.loaded = true; 

    preload.turnOn = function () {
      preload.loaded = true;
      console.log('on');
    }

    preload.turnOff = function () {
      preload.loaded = false;
      console.log('off');
    }

    preload.getState = function() {
      return preload.loaded;
    }


    return preload;

});

控制器

mazda.controller('preloadingHome', ['$scope', "preloader", function($scope, preload) {  
  $scope.users       = false;
    $scope.showPreload = preload.getState();
  console.log(preload.loaded);

   $scope.turnOn = function(){
       preload.turnOn();
   }

  $scope.turnOff = function(){
       preload.turnOff();
  }  
  // 
  // $scope.state = preload.state;
  // preload.turnOff();

}]);

查看

<body data-ng-controller="preloadingHome">
    <div>aaa: {{ showPreload }}</div>
    <div>b: {{users}} </div>

    <input type="checkbox" ng-model="users" />
    <input type="checkbox" ng-change="turnOff()" ng-model="pene" />
    <input type="checkbox" ng-change="turnOn()" ng-model="pene2" />
    <!-- script src="js/scripts.min.js"></script -->
    <script src="js/scripts.min.js"></script>  
    <script src="js/bundle.js"></script>  
</body>

我的问题是：无论我如何更改它，视图上的{{showPreload}}变量加载始终保持为真。

Answer 1

我认为重要的是要指出这不起作用的原因是因为你的getState（）方法按值返回，而不是通过引用返回。

当您的控制器实例化时，它会将showPreloaded变量设置为preloaded.loaded对象成员的值，即true。每次在此之后更改状态时，您正在正确更新工厂中的对象成员，但$scope.showPreloaded值等于true，因为它没有引用工厂中的值。

以下是更改代码的方法：

在视图中

<div>aaa: {{ showPreload.loaded }}</div>

在工厂：

preload.getState = function() {
  return preload;
}

工厂现在将返回对象预加载的引用。 Javascript总是在返回对象时返回引用，并在返回原语时返回值

Answer 2

您工厂的方法不是双向绑定，而是从工厂/服务公开变量，并绑定到该变量，例如

factory.state = { isTurnedOn : true };

您可以直接绑定到该工厂变量，也可以将控制器自己的变量链接到工厂变量

Answer 3

返回整个对象而不是返回原语。没有基元的继承

在工厂

preload.getState = function() {
  return preload;
}

在控制器中

$scope.preloadState = preload.getState();

在视图中

<div>aaa: {{ preloadState.preload ?'Yes':'No'}}</div>

现在，角度视图观察器将检测对象的属性更改并更新视图

Answer 4

您应该尝试写这个：scope.preload = preloader;

然后你可以操纵你的对象scope.preload。

如何监控工厂中变量的变化

4 个答案: