Question

我正在尝试绑定到控制器范围内的布尔变量，以指示是否应显示加载动画。但是，以下代码不起作用。 $timeout内的函数运行，但视图未更新。

当我使用chrome angular extension检查范围时，我发现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请求后设置值。

$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>

~~此外，控制器中的返回块无用。~~

修改

现在，我理解你的问题。这是我第一次看到从控制器返回的这个功能。经过半个小时的研究，我发现你不能指望在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>

绑定到控制器上的原始值

1 个答案: