在没有绑定 templateUrl 的情况下解析指令参数上的控制器变量答案

【问题标题】：resolve controller variable on directive param without binding for templateUrl在没有绑定 templateUrl 的情况下解析指令参数上的控制器变量
【发布时间】：2017-04-06 06:53:12
【问题描述】：

该指令位于我们不同应用前端之外的某个位置，将使用自定义 templateUrl 来针对不同的用例调用。

Module.directive 'directiveName', ->
  templateUrl: (tElement, tAttrs) ->
    tAttrs.templateurl || 'default.html'
...

在一些新的前端，我们选择了 webpack。我们旧的 bower/gulp/npm/sprockets 设置允许我们只使用类似的指令

<directive-name templateUrl="./_custom.html" ... />

但这不适用于 webpack，因为必须首先需要部分，并且指令不应该知道任何关于它的信息。所以我使用模板加载器来获取分配给控制器变量的部分路径并调用指令属性。

@templateUrl = require('ngtemplate!html!./custom.html')

所以明显的指令调用是

<directive-name templateUrl="ctrl.templateUrl" ... />
# or
<directive-name templateUrl="{{ctrl.templateUrl}}" ... />

但该值没有得到评估。所以唯一得到指令的就是ctrl.templateUrl 或{{ctrl.templateUrl}}。将其绑定到范围不是一个选项，因为它在解析指令中的 templateUrl 时不可用。

编辑：作为补充使用 ng-attr 来获取首先评估的控制器变量，例如

<directive-name ng-attr-templateUrl="{{ctrl.templateUrl}}" ... />

没用。

有什么想法或建议吗？

【问题讨论】：

“所以我使用模板加载器来获取控制器内部部分的路径。” 你需要 templateUrl 函数中的路径，但是得到它控制器内部。这背后的逻辑是什么？
您可以保持 HTML 完全相同，并在 templateUrl 函数中调用 require。有异议吗？
@zeroflagL 是的，因为使用的部分将通过属性分配。由于该指令不应该对此一无所知。如果它为空，则使用一些默认值。它是一些具有不同用例的通用指令，因此视图部分会在其实现位置发生变化。而require("ngtemplate!html!#{tAttrs.templateurl}") 里面的templateUrl() 将不起作用，因为它仍然是ctrl.templateUrl。
所以指令一定不知道正在使用webpack？这是一条重要的信息，它彻底改变了您的问题背景。

标签： angularjs angularjs-directive binding

【解决方案1】：

templateUrl 函数无权访问指令的范围，这就是不会评估该值的原因。您可以将变量传递给指令，然后将文件的内容编译到元素中：

http://plnkr.co/edit/36BhCaadkLWyrNjkjCEc?p=preview

angular.module('app', [])
.directive('directiveName', function($http, $compile) {
  return {
    scope: {
      templateurl: '='
    },
    link: function(scope, elem, attrs) {
      $http.get(scope.templateurl || './default.html').then(function(results) {
        elem.html(results.data);
        $compile(elem.contents())(scope);
      });
    }
  }
})
.controller('controllerName', function() {
  var self = this;
  self.templateUrl = "./_custom.html";
});

【讨论】：