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

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

Что я хочу сделать, это добавить директиву от контроллера следующим образом:

$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?

Ответы

Ответ 1

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

Директива

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

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

Ответ 2

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

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

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

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

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

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

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

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

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

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

scope: {
    title: '@directiveName'
}

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

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

Ответ 3

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

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

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

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

Надеюсь, что это поможет.