Передача ng- * атрибутов на угловую директиву

У меня есть угловая директива <my-button>, в которой мне нужно, чтобы она запускала другую директиву (my-fun-directive) на выходе, поэтому я использую $compile вместо директивы шаблон. К сожалению, похоже, что выполнение этого способа не позволяет передавать дополнительные атрибуты HTML или атрибуты ng-*.Передача ng- * атрибутов на угловую директиву

Директива

app.directive('myButton', function ($compile) { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: true, 
     link: function (scope, element, attrs) { 
      var btnTxt = attrs.text || ""; 
      scope.buttonInnerHtml = attrs.icon ? '<span class="glyphicon glyphicon-' + attrs.icon + '"></span> ' + btnTxt : btnTxt; 
      var template = '<button type="button" class="myCustomClass" ng-bind-html="buttonInnerHtml" my-fun-directive></button>'; 

      var content = $compile(template)(scope); 
      element.replaceWith(content); 
     } 
    }; 
});

Использование

<my-button 
    icon="ok" 
    text="Save Changes" 
    class="anotherClass" 
    ng-hide="someProperty" 
    ng-click="myClickEvent()" 
    example-directive></my-button>

Выходной ток (разрывы строк добавлены для читаемости)

<button 
    type="button" 
    class="myCustomClass" 
    ng-bind-html="buttonInnerHtml" 
    my-fun-directive> 
     <span class="glyphicon glyphicon-ok"><span> Save Changes 
</button>

Нужные Выходные (разрывы строк добавлены для читаемости)

<button 
    type="button" 
    class="myCustomClass anotherClass" 
    ng-bind-html="buttonInnerHtml" 
    ng-hide="someProperty" 
    ng-click="myClickEvent()" 
    my-fun-directive 
    example-directive> 
     <span class="glyphicon glyphicon-ok"><span> Save Changes 
</button>

Обратите внимание на включение ng-* атрибутов, дополнительная директива, и добавленный класс CSS. Как я могу заставить все это работать вместе?

источник

2015-01-08 Chris Barr

почему вы говорите 'поэтому я использую $ компилировать вместо шаблона директивы. '? вы можете указать директиву, указанную в атрибуте template/templateUrl директивы. – ps0604

@ ps0604 Да, я знаю, но другая директива, которую я пытаюсь использовать, кажется, не работает, когда я делаю это таким образом ... возможно, мне нужно еще немного изучить эту другую директиву, прежде чем я обвиню ее эта директива, хотя ... –

почему вы не публикуете плунж? которые должны работать, у вас может быть другая проблема. – ps0604

Проблема была в HTML-содержании кнопкиInnerHtml. Я получил ошибку «Попытка использовать небезопасную ценность в безопасном контексте». Когда я это исправил все работает отлично:

<!doctype html> 
 
<html> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script> 
 
    </head> 
 
    <body ng-app="plunker" ng-controller="MainCtrl"> 
 
     <my-button 
 
      icon="ok" 
 
      text="Save Changes" 
 
      class="anotherClass" 
 
      ng-hide="someProperty" 
 
      ng-click="myClickEvent()" 
 
      example-directive></my-button> 
 
    </body> 
 
    <script> 
 
    var app = angular.module('plunker', []).directive('myButton', function ($compile, $sce) { 
 
     return { 
 
      restrict: 'E', 
 
      replace: true, 
 
      scope: true, 
 
      link: function (scope, element, attrs) { 
 
       var btnTxt = attrs.text || ""; 
 
       scope.buttonInnerHtml = attrs.icon ? '<span class="glyphicon glyphicon-' + attrs.icon + '"></span> ' + btnTxt : btnTxt; 
 
       scope.buttonInnerHtml = $sce.trustAsHtml(scope.buttonInnerHtml); 
 
       var template = '<button type="button" class="myCustomClass" ng-bind-html="buttonInnerHtml" my-fun-directive></button>'; 
 

 
       var content = $compile(template)(scope); 
 
       element.replaceWith(content); 
 
      } 
 
     }; 
 
    }).controller('MainCtrl', ['$scope', '$http', function($scope, $http) { 
 

 
    }]); 
 
    </script> 
 
</html>

источник

2015-01-08 21:42:49

Передача ng- * атрибутов на угловую директиву

ответ

Смежные вопросы