Javascript 如何将异步变量从控制器传递到angularjs中的指令_Javascript_Angularjs_Asynchronous

Javascript 如何将异步变量从控制器传递到angularjs中的指令

javascript angularjs asynchronous

Javascript 如何将异步变量从控制器传递到angularjs中的指令,javascript,angularjs,asynchronous,Javascript,Angularjs,Asynchronous,我是angular的新手，正在努力将通过http资源在控制器中检索到的变量传递到指令中。首先我有一个问题，我的ngResource调用是异步的，然后我还有一个问题，我的资源调用是链接的这是我的html <html ng-app="routingRulesApp"> <body ng-controller="RulesDisplayCtrl"> <my-customer info="$activeRuleSetId"></my-customer&

我是angular的新手，正在努力将通过http资源在控制器中检索到的变量传递到指令中。首先我有一个问题，我的ngResource调用是异步的，然后我还有一个问题，我的资源调用是链接的

这是我的html

<html ng-app="routingRulesApp">
<body ng-controller="RulesDisplayCtrl">
    <my-customer info="$activeRuleSetId"></my-customer>
</body>
</html>

我正试图在指令控制器中获取$scope.formattedResults变量，以便构建自定义表/网格解决方案，但我不确定如何实现这一点。正如你所看到的，我非常迷路。我尝试使用延迟对象，希望它能绑定到一个变量。

这不是一个代码，但我需要向您介绍一些角度

要实现您的目标：

您需要一个控制器或一个调用异步函数的服务（从控制器中预传递和调用）
使用来自异步的结果的指令

我可以很快想到两种方法

注入控制器和指令的服务（可能具有不同的作用域）。异步调用完成后，两个作用域都将通过angular提供的数据绑定设置变量

控制器本身具有异步功能，共享作用域或广播变量或iherits等

现在，你不需要忘记一些关键的点，在你的角度爱好

关闭。学会使用并做一些很棒的事情
可变项。共享（分配）一个不可变的变量（整数、字符串）不会有帮助。更具体地说：由于承诺为一个变量设置了一个值，该值是可变的（例如dict），因此如果指令通过作用域访问该变量，或者如讨论的那样，当异步承诺返回时，如果您更新dict而不重置它，您的指令将具有正确的值。注意这一点

也许你知道其中的大部分，当然谷歌搜索会给你很多S.O.问题，这些问题的内容可以解释上述内容，可能会更好。也许有人也可以给你一些与代码相关的答案

祝你好运。

去掉$off info=“$activeRuleSetId”，你的模型被称为activeRuleSetId而不是$activeRuleSetId；接下来，确保您的模板实际位于指向它的目录中。/templates/currency-group-rule.html

var routingRulesApp = angular.module('routingRulesApp', [
  'routingRulesControllers',
  'routingRulesServices',
  'routingRulesDirectives'
]);

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

routingRulesControllers.controller('RulesDisplayCtrl', ['$scope', 'RuleSets', '$q',
    function($scope, RuleSets, $q) {

        var fr = null;
        var rpromise = $q.defer();

        $scope.activeRuleSetId = RuleSets.active({ruleId: 1}, function(activeRuleSetId) {

            var ruleSetId = activeRuleSetId[0];

            var ruleSet = RuleSets.query({ruleSetId: ruleSetId}, function(ruleSet) {

                console.log(ruleSet);
                fr = ruleSet;
                rpromise.resolve(fr);

            }, function(response) {
                //404 or bad
                if(response.status === 404) {
                    console.log("HTTP Error", response.status);
                }
            });


        }, function(response) {
            //404 or bad
            if(response.status === 404) {
                console.log("HTTP Error", response.status);
            }
        });

        $scope.formattedResults = rpromise.promise;

    }
]);

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

routingRulesDirectives.directive('myCustomer', [
    function() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                formattedResults: '=info'
            },
            templateUrl: 'templates/currency-group-rule.html',
            controller: function($scope) {
                console.log($scope.formattedResults);
                debugger;

            }
        };
    }
]);

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

routingRulesServices.factory('RuleSets', ['$resource',
    function($resource){
        return $resource('data/routing-ruleset-:ruleSetId.json', {}, {
            query: {method:'GET', isArray:true},
            active: {method:'GET', isArray: false, url: 'data/rulesets-activeRuleSetId.json', responseType:"text"}
        });
    }]);