كيف يمكنني التحويل إلى سمة؟

Question

هل من الممكن استخدامها بطريقة أو بأخرى 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>

هل هناك أي طريقة للقيام بذلك، أم هل يجب علي استخدام سمة بدلاً من التحويل؟

وهنا أ كمان مع المثال

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

كمان.

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

الغطاس: http://plnkr.co/edit/0ZfeLz?p=preview

Answer 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}} في القالب الخاص بك بما ورد أعلاه.

Answer 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/$ ترجمة

ال $transclude الدالة المستخدمة لتمريرها في compile الوظيفة، ولكن تم إهمالها، وهي الآن في link وظيفة.