Change templateURL of directive dynamically after $http.get()

Question

I'm working on 'skeleton' loading the UI in different components. I have a directive that I'm loading a template initially (this template has low opacity and looks like a mock table). Once I get the data I need in an http.get() then I want to change the templateUrl of the directive. Below is what I've tried so far.

function registers($log, $state, $templateCache, currentCountData, storeFactory) {
    var directive = {
        restrict: 'A',
        scope: true,
        templateUrl: '/app/shared/tableMock/tableMock.html',
        link: link
    };

    return directive;

    function link(scope, element, attrs) {
        storeFactory.getRegisters().then(function (data) {
            scope.registers = data.registers;
            $templateCache.put('/app/dashboard/registers/registers.html');
        });
    }
}

I'm not sure I'm on the right track. I can step through and see the storeFactory return the correct data from my factory. How can I then change the templateUrl of the directive?

Why not just put the real template to begin with, but put an ng-if inside and start off showing your mock table, and once data is loaded set the variable that ng-if checks so it hides the mock and then shows the other. — Scott, Aug 27 '15 at 22:52
that is sloppy, a lot of markup and business logic in one file. — Jon Harding, Aug 28 '15 at 00:52
Really? Adding one line
my mock image
and
to your template is sloppy? Seriously? — Scott, Aug 28 '15 at 01:02
As opposed to doing it the correct way and simply using CSS to have the real table appear in a "working" mode until data shows up and not having 2 templates that BLOAT your code. — Scott, Aug 28 '15 at 18:27
Scott, we'll agree to disagree, you don't have all the facts. What I'm doing allows the "working" templates to be reused and modified for each situation. Not sure why you're so touchy about it. — Jon Harding, Aug 31 '15 at 13:12

score 1 · Answer 1 · answered Aug 28 '15 at 01:07

For cases like this I usually do something like this in my directive template:

<div ng-switch="viewState">
  <div ng-switch-when="gotRegisters">
   Content for when you get the registers
  </div>
  <div ng-switch-default>
   For when you don't have the registers
  </div>
</div>

This way you could just change a variable to show your content ie scope.viewState = 'gotRegisters'; instead of waiting for it to download after you already downloaded your registers.

This would certainly work. I decided to load the new template in dynamically. See my answer. — Jon Harding, Aug 28 '15 at 01:14

score 0 · Accepted Answer · edited May 23 '17 at 12:22

With a help from this question I was able to come up with this

function link(scope, element, attrs) {                        
    storeFactory.getRegisters().then(function (data) {
        scope.registers = data.registers;
        $http.get('/app/dashboard/registers/registers.html', { cache: $templateCache }).success(function (tplContent) {
            element.replaceWith($compile(tplContent)(scope));
        });
    });
}

tplContent correlates to the response of the $http.get(). It's the html in the registers.html file. element represents the directive itself.

Change templateURL of directive dynamically after $http.get()

2 Answers2