没有超时服务的 Angular 指令不起作用答案

【问题标题】：Angular directive without timeout service does not work没有超时服务的 Angular 指令不起作用
【发布时间】：2016-10-19 13:16:35
【问题描述】：

在 angularJS 中，我编写了一个指令来显示数据。该数据由远程数据库中的 http 服务获取。

如果我在代码中应用 timeout 服务，则结果会显示在 html 页面上，因为 http 服务会在一秒钟内返回。

$timeout(function () {
         $scope.treeRoot = $scope.$eval('serviceResult') || {};
 }, 1000);

如果我不使用超时服务，则页面不会显示任何数据，因为 $scope.treeRoot 是空的，例如

$scope.treeRoot = $scope.$eval('serviceResult') || {};

在生产中，http服务可能需要超过一秒的时间才能返回，有没有通用的解决方案。

【问题讨论】：

能展示一下指令的HTML和链接功能吗？
这似乎是一个奇怪的地方使用$scope.$eval。如果您将整个函数，而不仅仅是$timeout，显示为minimal reproducible example，它可能更有意义。

标签： angularjs

【解决方案1】：

你应该使用 Angular 的 promises 或 $http 服务，它允许返回一个承诺。

在承诺之后，例如$http 请求，已解决，您可以使用结果填充$scope.treeRoot。

如果有帮助，请告诉我。

【讨论】：

【解决方案2】：

正如在一个答案中建议的那样，您必须使用 $http 承诺并在响应中捕获结果。

这是一个带有一些代码的示例。

服务：

app.factory('myService', ['$http',
    function($http){
        var obj = {};

        obj.get = function (q) {
            return $http.get('/your_get_url')
        };
        obj.post = function (q, object) {
            return $http.post('/your_post_url', object)
        };

        return obj;
    }
]);

在您的控制器中，

allControllers.controller('changePasswordController', ['$scope','myService',
    function($scope,myService) {

        myService.get().then(function (result) {
                $scope.treeRoot = 'use your result here'
            },function error(result)
            {
                console.log(result)
            })      

    }
])

这取代了您的超时问题。

【讨论】：