Angularjs - передать аргумент в директиву

Im интересно, есть ли способ передать аргумент директиве?

то, что я хочу сделать, это добавить директиву от контроллера такой:

$scope.title = "title";
$scope.title2 = "title2";

angular.element(document.getElementById('wrapper')).append('<directive_name></directive_name>');

можно ли передать аргумент одновременно, чтобы содержимое моего шаблона директивы могло быть связано с той или иной областью?

вот эта директива:

app.directive("directive_name", function(){
    return {
        restrict:'E',
        transclude:true,
        template:'<div class="title"><h2>{{title}}</h3></div>',
        replace:true
    };
})

Что делать, если я хочу использовать ту же директиву, но с $scope.title2?

53
angularjs arguments controller directive

4 ответов

вы можете передать аргументы в свою пользовательскую директиву, как вы это делаете с помощью встроенных угловых директив, указав атрибут в элементе директивы:

angular.element(document.getElementById('wrapper'))
       .append('<directive-name title="title2"></directive-name>');

что вам нужно сделать, это определить scope (включая аргумент (ы) / параметр(ы)) в заводской функции вашей директивы. В приведенном ниже примере директива принимает title-параметр. Затем вы можете использовать его, например, в template, используя регулярный угловой путь: {{title}}

app.directive('directiveName', function(){
   return {
      restrict:'E',
      scope: {
         title: '@'
      },
      template:'<div class="title"><h2>{{title}}</h2></div>'
   };
});

в зависимости от того, как и что вы хотите связать, у вас есть различные варианты:

  • = двусторонняя привязка
  • @ просто считывает значение (одно-жильных)
  • & используется для привязки функции

в некоторых случаях вы можете использовать "внешнее" имя, которое отличается от" внутреннего " имени. С внешним я имею в виду имя атрибута на элементе директивы и с внутренним я имею в виду имя переменной, которая используется в области действия директивы.

например, если мы посмотрим на директиву выше, вы не захотите указывать другой дополнительный атрибут для заголовка, даже если вы внутренне хотите работать с title-недвижимость. Вместо этого вы хотите использовать директиву следующим образом:

<directive-name="title2"></directive-name>

это может быть достигнуто путем указания имени за вышеупомянутым параметром в определении области:

scope: {
    title: '@directiveName'
}

Пожалуйста, также обратите внимание на следующие вещи:

  • HTML5-спецификация говорит, что пользовательские атрибуты (это в основном то, что повсюду в угловых приложениях) должны иметь префикс data-. Угловые поддержки это путем обнажать data--префикс из любых атрибутов. Таким образом, в приведенном выше примере вы можете указать атрибут элемента (data-title="title2") и внутренне все было бы так же.
  • атрибуты на элементах всегда в виде <div data-my-attribute="..." /> а в код (например, свойства объекта scope) они находятся в виде myAttribute. Я потерял много времени, прежде чем понял это.
  • для другого подхода к обмену / обмену данными между различными угловыми компонентами (контроллерами, директивами) вы можете взглянуть на службы или контроллеры директив.
  • вы можете найти более подробную информацию о угловая Домашняя страница (директивы)
127

вот как я решил мою проблему:

директива

app.directive("directive_name", function(){
    return {
        restrict: 'E',
        transclude: true,
        template: function(elem, attr){
           return '<div><h2>{{'+attr.scope+'}}</h2></div>';
        },
        replace: true
    };
})

контроллер

$scope.building = function(data){
    var chart = angular.element(document.createElement('directive_name'));
    chart.attr('scope', data);
    $compile(chart)($scope);
    angular.element(document.getElementById('wrapper')).append(chart);
  }

теперь я могу использовать разные области через ту же директиву и добавлять их динамически.

7

Вы можете попробовать, как показано ниже:

app.directive("directive_name", function(){
return {
    restrict:'E',
    transclude:true,
    template:'<div class="title"><h2>{{title}}</h3></div>',
    scope:{
      accept:"="
    },
    replace:true
  };
})

Он устанавливает двустороннюю привязку между значением атрибута "accept" и родительской областью.

а также вы можете установить двустороннюю привязку данных со свойством:'='

например, если вы хотите привязать ключ и значение к локальной области, вы должны сделать:

  scope:{
    key:'=',
    value:'='
  },

подробнее, https://docs.angularjs.org/guide/directive

Итак, если вы хотите передать аргумент из контроллер к директиве, затем обратитесь к этому ниже fiddle

http://jsfiddle.net/jaimem/y85Ft/7/

надеюсь, что это помогает..

6
<button my-directive="push">Push to Go</button>

app.directive("myDirective", function() {
    return {
        restrict : "A",
         link: function(scope, elm, attrs) {
                elm.bind('click', function(event) {

                    alert("You pressed button: " + event.target.getAttribute('my-directive'));
                });
        }
    };
});

вот что я сделал

Я использую директиву в качестве атрибута html, и я передал параметр следующим образом в моем HTML-файле. my-directive="push" и из директивы я извлек его из объекта события щелчка мыши. event.target.getAttribute('my-directive').

0