angular.js 在回调中触发 ng-show答案

【问题标题】：angular.js trigger ng-show within callbackangular.js 在回调中触发 ng-show
【发布时间】：2014-04-16 08:51:11
【问题描述】：

我尝试通过在 setTimeout 函数中编辑范围来触发 ng-show。 setTimeout 是数据库查询回调的占位符。

index.html:

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

<script src="script.js"></script>

<div ng-controller="c1">

    <div ng-show="{{show}}"  >

        test it

    </div>

</div>

script.js:

var amTestNgShow = angular.module('amTestNgShow',[]);

amTestNgShow.controller('c1', ['$scope', function($scope) {

    // this works: $scope.show = true;

    setTimeout(function(){

        $scope.show = true; // works not

        // does not help: $scope.$apply();

    }, 1000)

}]);

如何在 setTimeout 内实现？谢谢！

http://plnkr.co/edit/RPS2vZAlVfhliQKteSSK

更新：如上所述，setTimeout 不是问题，它仅用于生成可重现的 stackoverflow 问题。在我的项目中，我构建了一个服务：

amProject1.service('asBasic', ['$http', '$q', function($http, $q){

    var asBasic = {};

    asBasic.docName = '';

    var doc = {};

    asBasic.get = function(id){

        var deferred = $q.defer();

        $http({method:'GET', url: '/' + this.docName + '/' + id})
            .success(function(data, status, headers, config){

                if(data === undefined){

                    deferred.reject("The requested " + asBasic.docName + " was not found.")

                }

                doc = data;
                deferred.resolve(doc);

            })
            .error(function(data, status, headers, config){

                deferred.reject(status);

            })

       return deferred.promise;

    }


    return asBasic;

}]);

像这样使用它

amProject1.controller('acDoc1', ['$scope', '$routeParams', 'asBasic', function($scope, $routeParams, asBasic){

    asBasic.docName = 'doc1';

    // this works: $scope.show = true;

    asBasic.get($routeParams._id)
        .then(function(data){

            $scope.doc1 = data;

            $scope.show = true; // works not

            // does not help: $scope.$apply();

            // ...

        }
        // ...

【问题讨论】：

标签： angularjs asynchronous callback settimeout ng-show

【解决方案1】：

这是因为 setTimeout 在$scope 进程之外。注入并改用$timeout。

http://docs.angularjs.org/api/ng/service/$timeout

例如：

amTestNgShow.controller('c1', ['$scope', '$timeout', function($scope, $timeout) {
    $timeout(function(){
        $scope.show = true;
    }, 1000);
}]);

如果您确实想改用$scope.apply，我认为您只是使用错误。编辑范围后不要调用 $scope.apply()，而是将它们放在 apply 函数中：

$scope.apply(function(){
    $scope.show = true;
});

【讨论】：

谢谢，您的 $timeout 解决方案有效，但这并不是问题所在。请看我上面的更新。用 $scope.apply 包装范围编辑对我不起作用。

【解决方案2】：

我注意到您在模板中绑定到 {{show}}。花括号应该被删除，因为它们在 AngularJS 属性中。

【讨论】：

【解决方案3】：

我的帖子的后期评论：mrida 是对的（谢谢），大括号必须删除......

<div ng-controller="c1">

    <div ng-show="show">

        test it

    </div>

</div>

也可以用ng-style来解决。

html:

...

<div ng-controller="c1">

    <div ng-style="{'visibility': show}">

        test it

    </div>

</div>

...

控制器：

...

setTimeout(function(){

    $scope.show = "visible"; // or $scope.show = "hidden"

    $scope.$apply();

}, 1000)

...

【讨论】：

【解决方案4】：

使用$timeout 代替setTimeout 和'show' 代替'{{show}}'

<div ng-show="show">
    test it
</div>

【讨论】：