javascript - 绑定(bind)到 Controller 上的原始值

Question

我正在尝试绑定(bind)到 Controller 作用域上的一个 bool 变量，以指示是否应显示加载动画。但是，以下代码不起作用。 $timeout 中的函数运行，但 View 未更新。

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

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

我的猜测是该 View 实际上是绑定(bind)到 true，而不是绑定(bind)到会更改的 bool 值的位置。

如何让 View 绑定(bind)到变量，而不是变量最初具有的值？

Controller :

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

您错误地绑定(bind)了 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 block 没有用。

编辑

现在，我明白你的问题了。这是我第一次看到这种从 Controller 返回的特性。经过半小时的研究，我发现你不能指望在 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>