如何转换为属性？

Is is possible to somehow use ngTransclude for an attribute value, instead of replacing inner HTML content? For example this simple directive

是否有可能以某种方式使用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
  }
});

and use it as

并用它作为

<tag>foo</tag>

I want it to translate into

我希望它能翻译成

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

Is there any way of doing that, or do I have to use an attribute instead of transcluding?

有没有办法做到这一点，还是我必须使用属性而不是转录？

Here's a fiddle with the example

这是一个小例子

4 个解决方案

#1

Something like this:

像这样的东西：

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

One more solution:

还有一个解决方案

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

Plunker：http：//plnkr.co/edit/0ZfeLz？p = preview

#3

I know originally your question was about transclusion, but this problem is MUCH more succinctly solved using an attribute.

我知道你最初的问题是关于翻译，但是使用属性可以更简洁地解决这个问题。

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

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

and your html

和你的HTML

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

The translation:

译文：

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

Also, with the very latest version of Angular, there is a feature called "one-time binding" that is perfect for situations just like this where you only want/need to fulfill the interpolated value one time, upon initialization. The syntax looks like this:

此外，使用最新版本的Angular，有一个称为“一次性绑定”的功能，非常适合这样的情况，在这种情况下，您只需要/需要在初始化时满足插值一次。语法如下所示：

{{::url}}

Just replace all instances of {{url}} in your template with the above.

只需使用上述内容替换模板中{{url}}的所有实例即可。

#4

Vadim's answer can be easily fixed by using the compile function, and returning the postLink function, where tranclusion will happen.

Vadim的答案可以通过使用编译函数轻松修复，并返回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);
          });
        };
    }
  };
});

Please refer to https://docs.angularjs.org/api/ng/service/$compile

请参阅https://docs.angularjs.org/api/ng/service/$compile

The $transclude function used to be passed in the compile function, but it was deprecated, and is now in the link function.

$ transclude函数曾经在compile函数中传递，但它已被弃用，现在位于link函数中。

#1