Переименование переменной в ng-include

Вот соответствующий html:

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

Приложенная к области, в которую вставляется ng-include, является торговой переменной. Торговая переменная выглядит следующим образом:

var trade = {
    order: {}
}

Проблема в том, что order.html ожидает переменную заказа не a trade.order

Как я могу вызвать ng-include и передать trade.order как order?

Ответы

Ответ 1

ng-include читает переменные в глобальной области. Вы не можете использовать это. Это не сработает.

И не используйте onload, потому что он помещает глобальную область.

Чище решение должно сделать новую общую директиву

Здесь идеальное использование:

<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 и добавляет эти члены в свою собственную локальную область.

Надеюсь, это поможет. Он чистый и общий.

Ответ 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>