Question

我正在Angular中构建一种（虚假）加载器。目前，我有这个：

const app = angular.module('app', []);

app.controller('loaderCtrl', ($scope, $timeout) => {
    let loading = $scope.loading,
         loaded = $scope.loaded;

    $scope.reset = () => {
        $timeout(() => {
            loading = false;
            loaded = false;
            console.log(loaded);
        }, 500);
    }
});

HTML：

<main ng-app="app">
    <div ng-controller="loaderCtrl as loader" >
        <div class="loader" ng-class="{ '-loading' : loader.loading === true, '-loaded' : loader.loaded === true }"></div>
        <button ng-click="loader.loading = true;">loading</button>
        <button ng-click="loader.loaded = true; reset();">loaded</button>
    </div>
</main>

CodePen：http://codepen.io/tomekbuszewski/pen/WrXXdp

我的问题是，loading和loaded都没有为我的视图设置，所以这些类永久存在。我该怎么办？

Answer 1

说过我不知道Babel，所以我在JS编译版本上工作，我注意到你已经将loader.loading和loader.loaded分配给变量，然后使用那些＆＃34;引用＆＃34;在$ timeout函数中。

与javascript一样

原语按值传递，对象由＆＃34;副本传递参考＆＃34;

你必须使用$ scope.loader.loading和$ scope.loader.loaded

app.controller('loaderCtrl', function ($scope, $timeout) {
    $scope.loader = {};
    var loading = $scope.loader.loading, loaded = $scope.loader.loaded;
    $scope.reset = function () {
        $timeout(function () {
            $scope.loader.loading = false;
            $scope.loader.loaded = false;
        }, 500);
    };
});

我在这里分叉了您的CodePen：http://codepen.io/beaver71/pen/wMPprm

Answer 2

所以，这是一个范围问题。基本上当你这样做时

let loading = $scope.loading,
    loaded = $scope.loaded;

你得到了＆＃34;价值＆＃34; Angular范围内的变量。因此，Angular对这些

所做的更改一无所知

修复很简单，不要这样做，而是

$scope.reset = () => {
    $timeout(() => {
        $scope.loading = false;
        $scope.loaded = false;
    }, 500);
}

为什么不使用对象并更改其内容？可以像@beaver指出的那样做，但是你有另一个问题，你需要通过$apply自己触发摘要周期。在代码中的某处，您可能会意外地更改对象的内容，并且可能会影响系统的其他部分

一次又一次的角度去除课程

2 个答案: