AngularJS：在指令模板函数中返回一个承诺答案

【问题标题】：AngularJS: Returning a promise in directive template functionAngularJS：在指令模板函数中返回一个承诺
【发布时间】：2023-04-06 23:37:01
【问题描述】：

正如标题所说，我想在指令模板函数中返回一个承诺，即：

angular.module('someModule', [])
  //...
  .directive('someDirective', function() {
    return {
      //...
      restrict: 'E',
      template: function() {
        var deferred = $q.defer();

        //Some Async function which will call deferred.resolve

        return deferred.promise; //Promise not supported by template property
      }
    };
  });

由于模板属性不支持这一点，有什么（简单）方法可以“模拟”它吗？

看起来指令 resolve 是我最好的选择，但我很难想出一个很好的方法来应用从 WebSocket 加载的模板在 resolve 方法中。

我的目标是使用单个 WebSocket 连接进行所有通信。

【问题讨论】：

控制器属性怎么样？
是的，这是一个选项。但是如果我理解正确的话，走这条路需要我指定一个虚拟模板，其中包含类似 ng-include 的内容，然后编译从 websocket 调用获得的模板并将其设置为 ng-include 中使用的 src 变量。我希望有一种不那么迂回的方式来做到这一点。

标签： javascript angularjs templates websocket angularjs-directive

【解决方案1】：

您可以尝试另一种方法：

app.run(function($templateCache, myTemplateLoader) {
    myTemplateLoader.load('templateName').then(function(content) {
        $templateCache.put('templateName', content);
    });
});

现在您可以在指令中简单地使用 templateUrl 属性：

app.directive('someDirective', function() {
    return {
        // ...
        templateUrl: 'templateName'
    };
});

【讨论】：

$templateCache 看起来很有希望。但我无法让您的代码正常工作。 'myTemplateLoader' 是我必须自己创建的自定义服务，它有一个返回承诺的加载方法吗？在指令中不应该是“templateUrl”而不是“模板”吗？否则，我不明白 Angular 如何知道“templateName”应该被视为模板请求，而不仅仅是模板字符串。如果我让它工作，那将立即加载所有模板（在运行块中），对吧？
@Arokh 是的，myTemplateLoader 的实现取决于您，因为您已经说过要使用 WebSocket（我不知道对它的内置支持）。是的，它应该是templateUrl 而不是template。我的错。我会修复答案。
@Arokh 回答您的最后一个问题，是的，这样所有模板都将被预加载并缓存在 run 块中。我认为这可能是可取的，也可能是不可取的。
我会将此作为答案，因为它不需要我之后编译从 websocket 获取的模板。

【解决方案2】：

在解析中返回模板，请按照 dan wahlin 的动态加载控制器示例并为您的指令执行类似 routeResolver.resolve 函数的操作

http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx

如果它不起作用，请告诉我，我将创建 plunker 并更新它

【讨论】：

嗯，那篇文章读起来像是解决了一个不同的问题。如果我误解了，我可以在哪里放置异步（websocket）调用来加载模板？