Question

此指令位于我们不同的应用程序前端之外的某个位置，并将针对不同的用例使用自定义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}}" ... />

不起作用。

有任何想法或建议吗？

Answer 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";
});

解析指令param上的控制器变量而不绑定templateUrl

1 个答案: