AngularJS - передача параметров конфигурации в директиву

Вот рабочая демонстрация, которая покажет вам, как это сделать.

app.directive('myDirective', function(){
  return {
    replace: true,
    scope : {
      myParam : '@',
      someTitle : '@',
      clickCallback: '&'
    },
    link: link,
    template: '<p>{{someTitle}}</p>'
  }


  function link(scope, elem, attrs){
    elem.bind('click', function(){
      scope.clickCallback();
    }) 

    console.log(scope.myParam);
    console.log(scope.someTitle);
  }
})

Итак, передайте данные в свою область действия, используя "@" (при передаче строк) и "&" для функций.

& позволит вам пройти обратный вызов и выполнить их в области orignal.

Вы можете больше узнать о угловых документах.

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

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

 link: function(scope, element, attrs) {
      attrs.myParam === 55;
      attrs.someTitle === "My Title";
      attrs.clickCallback === myOnClickCallback;
    }

Я взял пример на свой вопрос, чтобы продемонстрировать его.

Если у вас есть сомнения в атрибутах области действия, например "@" и "=", проверьте этот ответ и прочитайте угловые документы.

В директиве "=", "&", "@" есть три разных варианта:

Эти два, которые вы хотите использовать, - это

"&" позволит вам перейти к функции

"@" примет строку

Что-то не стоит ничего, свойства camelCase будут автоматически анализироваться угловыми и превращаться в верблюд-футляр (обратите внимание на hypen) при присвоении значения

.directive("myDialog", function() {
    return {
        restrict: "E", // allows us to restrict it to just elements ie <my-dialog>
        scope: {
            "close": "&onClose", // putting a new name here allows us to reference it different on the html
            // would become <my-dialog on-close="someFn()"></my-dialog>
            "myParam": "@"
        },
        template: "<button type='button' data-ng-click='close()'>Dummy - {{myParam}}</button>"
      };
});


.controller("fooCtrl", [function(){
    var vm = this;
    vm.someRandomFunction = function(){
        alert("yay!");
    };
}]);

Окончательный html будет выглядеть так:

<div ng-controller="fooCtrl as vm">
    <my-dialog on-close="vm.someRandomFunction()" my-param="55"></my-dialog>
</div>

Стоит прочитать, а также ссылки на ответ

Plnkr

Просто попробуйте с этим вы получите значения от attrs

ссылка:

function(scope, element, attrs) {
    alert(attrs.myParam);
},

    .directive('myPane', function() {
      return {
        require: '^myTabs',
        restrict: 'E',
        transclude: true,
        scope: {

        /*
        *Exmaple:
        <my-directive my-param="55" some-title="My title" click-callback="myOnClickCallback">
</my-directive>
         */
          myParam: '@',//@ is a string parameter 
          someTitle:'@',
         /*is a double direction parameter 
         *(changable in the directive itself)
         *You can pass by '=' objects and functions(with parameters)
         */

          clickCallback:'=' 
        },
        link: function(scope, element, attrs) {
          //Here you write functions of the directive and manipulate it scope
        },
        templateUrl: 'template.html'
      };
    });

для получения дополнительной информации: https://docs.angularjs.org/api/ng/directive/ngClass.

Удачи!