CODEWITHSUNDEEP
javascripthtmlangularjsparametersconfiguration
Ricky
Ricky

Reputation: 2907

AngularJS - Passing configuration parameters to a directive

I'd like to pass parameters (values and functions) to an Angular directive.

I feel like this something like this exists in Angular, however I can't find it. Maybe I'm not using the correct search terms or terminology...

Example

<my-directive my-param="55" some-title="My title" click-callback="myOnClickCallback">
</my-directive>

Is this doable?

Upvotes: 0

Views: 1882

Answers (5)

Teliren
Teliren

Reputation: 342

There are three different options in directive "=", "&", "@"

The two you are wanting to use are

"&" will let you pass in a function

"@" will accept a string

Something worth nothing, camelCase properties will be automagically parsed by angular and turned into camel-case (notice the hypen) when assigning a value

.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!");
    };
}]);

The final html would look like

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

Worth reading as well as the links on the answer

Plnkr

Upvotes: 1

Moncef Hassein-bey
Moncef Hassein-bey

Reputation: 1361

Here a working demo that show you how to do this.

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

So, pass data your directive scope, using '@' (when passing strings) and '&' for functions.

the & will let you pass callback and execute them, in the orignal scope.

Your can read more on angular docs.

Upvotes: 1

CNandamuri
CNandamuri

Reputation: 1

Just try with this you will get values from attrs

link: 

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

Upvotes: 0

cagica
cagica

Reputation: 679

You don't have to create a private scope for your directive, like the other answer do. It depends on what you want to do with the directive.

You can simply create a private scope for your directive, see the other answers, or instead use the attr in the link, or compile function if you want to share the parent scope.

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

I took the example atributes on your question, for demonstrating it.

If you have some doubt's in the directive scope atributes like "@" and "=", check this answer and read the angular docs.

Upvotes: 1

Lior Ben Aharon
Lior Ben Aharon

Reputation: 125

    .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's scope
        },
        templateUrl: 'template.html'
      };
    });

for more information : https://docs.angularjs.org/api/ng/directive/ngClass.

Good luck!

Upvotes: -1

Related Questions