绑定到控制器上的原始值

Question

我正在尝试绑定到控制器作用域上的一个布尔变量，以指示是否应显示加载动画。但是，以下代码不起作用。 $timeout里面的函数运行了，但是视图没有更新。

当我使用 chrome angular 扩展检查范围时，我看到 ctrl.loading 是 true。

这是因为布尔值是 javascript 中的值类型，而不是引用类型吗？

我的猜测是该视图实际上是绑定到 true，而不是绑定到会更改的布尔值的位置。

如何让视图绑定到变量，而不是变量最初具有的值？

控制器：

function TestController($scope,$timeout){
    "use strict";

    var loading=true;

    $timeout(function(){
        loading=false;
    }, 1000);

    return {
        loading:loading
    }

}

模板：

<div>
    <h1 ng-show="ctrl.loading">Loading</h1>
    <h1 ng-hide="ctrl.loading">Not Loading</h1>
</div>

上面的代码只是一个例子，真的我会在get请求wqas返回后设置值。

$http.get().then(function() {
    loading=false;
}, function() {
    loading=false;
})

但是效果是一样的

Answer 1

您错误地绑定了 loading 变量。您需要将该变量 loading 注册到 $scope 或 this 变量。请参阅以下工作示例：

var app = angular.module("sa", []);

app.controller("TestController", TestController);

function TestController($scope, $timeout) {
  "use strict";
  var vm = this;

  vm.loading = true;

  $timeout(function() {
    vm.loading = false;
  }, 2000);

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="sa" ng-controller="TestController as ctrl">
  <h1 ng-show="ctrl.loading">Loading</h1>
  <h1 ng-hide="ctrl.loading">Not Loading</h1>
</div>

~~另外，controller中的return块没有用~~

编辑

现在，我明白你的问题了。这是我第一次从控制器上看到 returning 这个功能。经过半小时的研究，我发现你不能指望在 Javascript 中通过引用传递原始类型。您需要使用一些对象。

查看范围继承问题以获得要点：https://github.com/angular/angular.js/wiki/Understanding-Scopes

要解决此问题，您可以像下面这样更改代码：

var app = angular.module("sa", []);

app.controller("TestController", TestController);

function TestController($scope, $timeout) {
  "use strict";
  var myData = {};

  myData.loading = true;

  $timeout(function() {
    myData.loading = false;
  }, 2000);

  return {
    myData: myData
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="TestController as ctrl">
  <h1 ng-show="ctrl.myData.loading">Loading</h1>
  <h1 ng-hide="ctrl.myData.loading">Not Loading</h1>
</div>

绑定到控制器上的原始值

Binding to primitive value on controller

javascript

angularjs

javascript-databinding