Angularjs 如何将其转换为属性？

是否可以对属性值使用

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

var testapp=angular.module（'testapp'，[]）
testapp.directive（'tag'，function（）{
返回{
模板：“”，
限制：'E'，
转移：对
}
});

并将其用作

<tag>foo</tag>

foo

我想把它翻译成

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

有没有办法做到这一点，或者我必须使用一个属性而不是转置

下面是一个例子

类似这样的例子：

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;
                });
            }
        }
    }
  }
});​

{{::url}}

var testapp=angular.module（'testapp'，[]）
testapp.directive（'tag'，function（）{
返回{
限制：'E'，
模板：“”，
替换：正确，
是的，
编译：函数编译（远程通讯、tAttrs、转置）{
返回{
前置：功能（范围）{
转移（范围、功能（克隆）{
scope.transcluded_content=克隆[0]。textContent；
});
}
}
}
}
});​

.

还有一个解决方案：

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

app.directive（'tag'，function（$compile）{
返回{
限制：'E'，
模板：“”，
转移：'元素'，
替换：正确，
控制器：函数（$scope、$element、$transclude）{
$transclude（功能（克隆）{
var a=angular.element（'
Vadim的答案可以通过使用
compile
函数并返回postLink函数来轻松修复，在该函数中将发生tranclusion

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

app.directive（'tag'，function（$compile）{
返回{
限制：'E'，
模板：“”，
转移：'元素'，
替换：正确，
编译：函数（$element，$attrs）{
返回函数（$scope、$element、$attrs、$controller、$transclude）{
$transclude（功能（克隆）{
var a=angular.element（'$compile

$transclude
函数过去是在
compile
函数中传递的，但是它被弃用了，现在是在
link
函数中。
我知道最初您的问题是关于转置的，但是使用属性可以更简洁地解决这个问题

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

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

只需将模板中{url}的所有实例替换为上述内容。
如果controllerYeah中没有DOM操作，这将是一个更好的答案，使用
$element
通常是一个坏主意。@georgiosd->DOM操作正是ngTransclude指令本身所做的。
<h1><a href="foo">foo</a></h1>

{{::url}}