Как я могу перейти в атрибут?

Можно ли как-то использовать ngTransclude для значения атрибута вместо замены внутреннего содержимого HTML? Например, эта простая директива

var testapp = angular.module('testapp', [])

testapp.directive('tag', function() {
  return {
    template: '<h1><a href="{{transcludeHere}}" ng-transclude></a></h1>',
    restrict: 'E',
    transclude: true
  }
});

и использовать его как

<tag>foo</tag>

Я хочу, чтобы он переводился в

<h1><a href="foo">foo</a></h1>

Есть ли способ сделать это, или мне нужно использовать атрибут вместо того, чтобы переводить?

Здесь fiddle с примером

Ответ 1

Что-то вроде этого:

var testapp = angular.module('testapp', [])

testapp.directive('tag', function() {
  return {
    restrict: 'E',
    template: '<h1><a href="{{transcluded_content}}">{{transcluded_content}}</a></h1>',
    replace: true,
    transclude: true,
    compile: function compile(tElement, tAttrs, transclude) {
        return {
            pre: function(scope) {
                transclude(scope, function(clone) {
                  scope.transcluded_content = clone[0].textContent;
                });
            }
        }
    }
  }
});

fiddle.

Ответ 2

Еще одно решение:

app.directive('tag', function($compile) {
  return {
    restrict: 'E',
    template:"<h1></h1>",
    transclude: 'element',
    replace: true,
    controller: function($scope, $element, $transclude) {
      $transclude(function(clone) {
        var a = angular.element('<a>');
        a.attr('href', clone.text());
        a.text(clone.text());        
        // If you wish to use ng directives in your <a>
        // it should be compiled
        //a.attr('ng-click', "click()");
        //$compile(a)($scope);       
        $element.append(a);
      });
    }
  };
});

Plunker: http://plnkr.co/edit/0ZfeLz?p=preview

Ответ 3

Я знаю, что изначально ваш вопрос касался трансклюзии, но эта проблема намного более кратко решена с использованием атрибута.

var testapp = angular.module('testapp', [])

testapp.directive('tag', function() {
  return {
    template: '<h1><a href="{{url}}">{{url}}</a></h1>',
    restrict: 'E',
    scope: {
      url: '@'
    }
  }
});

и ваш html

<tag url="foo"></tag>

Перевод:

<h1><a href="foo">foo</a></h1>

Кроме того, с самой последней версией Angular существует функция, называемая "одноразовая привязка", которая идеально подходит для ситуаций, подобных этому, когда вы хотите/только выполнить интерполированное значение один раз при инициализации, Синтаксис выглядит следующим образом:

{{::url}}

Просто замените все экземпляры {{url}} в вашем шаблоне указанным выше.

Ответ 4

Ответ Вадима можно легко устранить с помощью функции compile и вернуть функцию postLink, где произойдет транскрипция.

app.directive('tag', function ($compile) {
  return {
    restrict: 'E',
    template: '<h1></h1>',
    transclude: 'element',
    replace: true,
    compile: function($element, $attrs) {
        return function ($scope, $element, $attrs, $controller, $transclude) {
          $transclude(function(clone) {
            var a = angular.element('<a></a>');
            a.attr('href', clone.text());
            a.text(clone.text());        
            // If you wish to use ng directives in your <a>
            // it should be compiled
            // a.attr('ng-click', 'click()');
            // $compile(a)($scope);
            $element.append(a);
          });
        };
    }
  };
});

Обратитесь к https://docs.angularjs.org/api/ng/service/ $compile

Функция $transclude, которая была передана в функции compile, но она устарела и теперь находится в функции link.