Question

我正在研究骨架＆＃39;在不同的组件中加载UI。我有一个指令，我最初加载模板（此模板具有低不透明度，看起来像一个模拟表）。在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从factory返回正确的数据。我怎样才能更改指令的templateUrl？

Answer 1

对于这样的情况，我通常在我的指令模板中执行类似的操作：

<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';，而不是在您下载注册表后等待下载。

Answer 2

在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代表指令本身。

在$ http.get（）之后动态更改指令的templateURL

2 个答案: