在 $http.get() 之后动态更改指令的 templateURL

Question

我正在研究 'skeleton' 在不同组件中加载 UI。我有一个指令，我最初要加载一个模板（这个模板的不透明度很低，看起来像一个模拟 table）。一旦我在 http.get() 中获得我需要的数据，我就想更改指令的 templateUrl。以下是我迄今为止尝试过的方法。

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');
        });
    }
}

我不确定我的方向是否正确。我可以逐步查看 storeFactory return 来自 factory 的正确数据。我怎样才能更改指令的 templateUrl？

Answer 1

在 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 与 $http.get() 的响应相关。它是 registers.html 文件中的 html。 element 代表指令本身。

Answer 2

对于这种情况，我通常在我的指令模板中做这样的事情：

<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>

这样您就可以更改一个变量来显示您的内容ie scope.viewState = 'gotRegisters';，而不是在您已经下载寄存器后等待它下载。

在 $http.get() 之后动态更改指令的 templateURL

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

angularjs

angularjs-directive

angular-templatecache