How do I pass an asynchronous variable from controller to a directive in angularjs

Question

I am new to angular and am struggling to pass a variable that I have retrieved in my controller over a http resource into my directive. Firstly I have the issue that my ngResource call is asynchronous and then I have an added issue that my resource call is chained.

This is my html

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

This is my Javascript

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"}
        });
    }]);

I am trying to get hold of my $scope.formattedResults variable inside my directive controller so that I can build a custom table / grid solution but I am unsure of how to achieve this. As you can see I am very lost. I have attempted to use deferred objects and hoped that it would bind to a variable.

take the $ off info="$activeRuleSetId", your model is called activeRuleSetId not $activeRuleSetId; Next make sure your template is actually in the directory you're pointing it to ./templates/currency-group-rule.html — Thierry Blais
– Thierry Blais, Commented Feb 7, 2014 at 17:16

Jimmy Kane · Accepted Answer · 2014-02-07 23:22:20Z

Well it's not a code answer this but I need to guide you a bit to some angular aspects.

To achieve your goal:

You need a controller or a service (preffered and called from the controller) that calls an async function.
A directive to use the results from the async.

I can quickly think of two ways.

Service injected to controller and directive (might have different scope). When the async call is done both scopes will have the variable set via data binding that angular offers.
Controller by it's own has the async function and shares scope or broadcasts the variable or iherits etc etc.

Now some crucial points you need not to forget in you Angular endevours.

Closures. Learn use and do awesome stuff
Mutables. Sharing (assigning) a variable that is immutable(integers, strings) wont help. To be more specific: Since the promise sets a value to a variable that the value is mutable(eg dict) then if the directive has access to that variable via the scope or as discussed, when the async promise is returned, your directive will have the correct value if you update the dict and not reset it. Pay attention to that.

Probably you know most of them, and sure googling will give you a lot of S.O. questions with content that explain the above and might be better. Maybe someone can give you some code related answer as well.

Good luck.

Collectives™ on Stack Overflow

How do I pass an asynchronous variable from controller to a directive in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related