0

我正在研究在不同组件中加载 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指令的？

4

2 回答 2

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';，而不是在下载寄存器后等待它下载。

于 2015-08-28T01:07:13.143 回答
0

在这个问题的帮助下，我能够想出这个

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()。这是文件中的html registers.html。element表示指令本身。

于 2015-08-28T00:56:17.720 回答