Question

以下是相关的html：

<ng-include src="'app/views/order.html'"></ng-include>

附加到范围，此ng-include嵌套在一个贸易变量中。交易变量如下：

var trade = {
    order: {}
}

问题是order.html期望订单变量不是trade.order

如何拨打ng-include并将trade.order作为order传递？

Answer 1

ng-include读取全局范围内的变量。你不能使用它。它不起作用。

不要使用onload，因为它会占用全球范围。

更清洁的解决方案是制作a new generic directive

这是理想的用法：

<div ng-include-template="'app/views/order.html'" ng-include-variables="{ order: trade.order }"></div>

指令是：

.directive(
  'ngIncludeTemplate'
  () ->
    {
      templateUrl: (elem, attrs) -> attrs.ngIncludeTemplate
      restrict: 'A'
      scope: {
        'ngIncludeVariables': '&'
      }
      link: (scope, elem, attrs) ->
        vars = scope.ngIncludeVariables()
        for key, value of vars
          scope[key] = value
    }
)

您可以看到该指令不使用全局范围。相反，它从ng-include-variables读取对象，并将这些成员添加到其自己的本地范围。

我希望这会有所帮助。它干净而且通用。

Answer 2

昨天我回答了一个非常相似的问题。

相同答案：使用具有隔离范围的指令

Multiple ngIncludes with Different controls visible

Answer 3

解决方案是创建一个新指令：

  angular.module('MyApp').directive('includeTemplate', directive);

  function directive() {
      return {
          templateUrl: function(elem, attrs) {
              return attrs.includeTemplate;
          },
          restrict: 'A',
          scope: {
              'includeVariables': '&'
          },
          link: function(scope, elem, attrs) {
              var vars = scope.includeVariables();
              Object.keys(vars).forEach(function(key) {
                  scope[key] = vars[key];
              });
          }
      };
  }

以下是用法：

<div include-template="'myTemplate.html'" include-variables="{ var: 'myVar' }"></div>

在ng-include中重命名变量

3 个答案: