CODEWITHSUNDEEP
javascriptangularjsasynchronous
Dieter 'user1027339'
Dieter 'user1027339'

Reputation: 203

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

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.

Upvotes: 0

Views: 1087

Answers (1)

Jimmy Kane
Jimmy Kane

Reputation: 16825

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.

  1. 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.
  2. 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.

Upvotes: 1

Related Questions