속성으로 어떻게 변환할 수 있습니까?

속성으로 어떻게 변환할 수 있습니까?

어떻게든 사용이 가능한가요?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>

그럴 수 있는 방법이 있나요, 아니면 그냥 속성을 사용해야 하나요?

여기 그 예에 대한 연주가 있습니다.

이와 같은 것:

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

만지작거리다

또 하나의 해결책:

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

플렁커: http://plnkr.co/edit/0ZfeLz?p=preview

저는 원래 당신의 질문이 트랜스클루전에 관한 것이었다는 것을 알고 있지만, 이 문제는 속성을 사용하여 훨씬 더 간결하게 해결됩니다.

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의 가장 최신 버전에서는 초기화 시 보간된 값을 한 번만 수행하기를 원하거나 필요로 하는 이와 같은 상황에 적합한 "one-time binding" 기능이 있습니다.구문은 다음과 같습니다.

{{::url}}

템플릿에 포함된 {{url}}의 모든 인스턴스를 위의 인스턴스로 바꿉니다.

Vadim의 답변은 다음을 사용하여 쉽게 수정할 수 있습니다.compile기능, 그리고 tranclusion이 발생하는 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기능.

언급URL : https://stackoverflow.com/questions/11703086/how-can-i-transclude-into-an-attribute