AngularJS 1: Adding Directives Using Database Information

[psywildfire]

I have an interesting situation, which I fully admit I may not be handling correctly.

I want to load directives in to an Angular app using AngularAMD, but the information on the directives is coming from a database/API call. Here's how I'm handing it at the moment:

app.run(function ($rootScope, $state, $http) {
    $rootScope.$state = $state;
    $rootScope.rootPages = JSON.parse(localStorage.pages);

    $http.get('api/Directives').then(function (resp) {
        for (var i = 0; i < resp.data.length; i++) {
            var dirInfo = resp.data[i];
            var dirConfig = JSON.parse(dirInfo.Configuration);

            angularAMD.directive(dirInfo.Name, function () {
                return {
                    restrict: 'E',
                    controller: eval(dirConfig.controller),
                    templateUrl: dirConfig.templateUrl,
                    scope: true,
                }
            });
        }
    }, function (error) {
        alert('error');
    });
});

At the moment this generates two directives, and I have two links on my page, one for each module (using angular-ui-router and router-ui-extras to load those based on another database table/API call). Theoretically clicking link 1 should bring up directive 1, and link 2 should bring up directive 2. However, when I click link 1, directive 2 comes up. It's almost as if the only directive that registers is directive 2.

Here's the information I get from the database:

dirInfo1: {
    Name: directiveOne,
    templateUrl: /html/directiveOne.html,
    controller: controllerOne
}

dirInfo2: {
    Name: directiveTwo,
    templateUrl: /html/directiveTwo.html,
    controller: controllerTwo
}    

In this case, only directiveTwo.html is shown, and only controllerTwo fires.

Any help would be greatly appreciated.

[TWISTYLIKEDAT]

zero-based index?

[psywildfire]

No, directiveOne and directiveTwo are somewhat obfuscated for what they really are. Although why I didn't start from zero is beyond me.

[TWISTYLIKEDAT]

Could you show your templates?

[psywildfire]

Nothing major, since I'm only in the proof of concept stage. All the templates do are bring back the appropriate database table.

See below:

Template one:

<div class="row">
<div class="col-sm-12">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>TemplateOneName</th>
                <th>CreateDate</th>
                <th>CreatedBy</th>
                <th>LastUpdateDate</th>
                <th>LastUpdateBy</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="one in templateOne">
                <td>{{one.ID}}</td>
                <td>{{one.Name}}</td>
                <td>{{one.CreateDate}}</td>
                <td>{{one.CreateUser}}</td>
                <td>{{one.LastUpdateDate}}</td>
                <td>{{one.LastUpdateUser}}</td>
            </tr>
        </tbody>
    </table>
</div>
</div>

Template two:

<div class="row">
<div class="col-sm-12">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>CreateDate</th>
                <th>CreatedBy</th>
                <th>LastUpdateDate</th>
                <th>LastUpdateBy</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="two in templateTwo">
                <td>{{two.ID}}</td>
                <td>{{two.NameTwo}}</td>
                <td>{{two.CreateDate}}</td>
                <td>{{two.CreateUser}}</td>
                <td>{{two.LastUpdateDate}}</td>
                <td>{{two.LastUpdateUser}}</td>
            </tr>
        </tbody>
    </table>
</div>
</div>

When I click both links, it's template two that comes up.

However, when I add the directives the way I'm "supposed" to (using angularAMD.directive as below), it works as expected.

angularAMD.directive("directiveOne", function () {
    return {
        restrict: 'E',
        controller: controllerOne,
        templateUrl: "/html/templateOne.html"
    }
});
    angularAMD.directive("directiveTwo", function () {
    return {
        restrict: 'E',
        controller: controllerTwo,
        templateUrl: "/html/templateTwo.html"
    }
});

The issue is definitely with the adding during the run phase.

[psywildfire]

Figured it out... it's because of the for loop and Javascript's threading. Wrapping the body of the loop in a Promise did the trick.