0

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?

Yogeshree Koyani
  • 1,649
  • 10
  • 19
Ricky
  • 2,850
  • 5
  • 28
  • 41
  • 1
    completely possible, you might want to look at the documentation to understand how to do that. But youll want to use the & sign for functions https://docs.angularjs.org/guide/directive – Teliren Sep 29 '15 at 14:04

5 Answers5

1

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.

Community
  • 1
  • 1
cagica
  • 678
  • 4
  • 23
  • Thanks @pcagica. What is the difference between using this link function versus the scope block as described in other answers? Why would one use one versus the other ? – Ricky Sep 29 '15 at 15:25
  • 1
    Let's see, if you want to reuse the directive,like create your own custom card layout, it's better an isolated scope, so you don't need to depend on other scope. If you simply want to bind some event to a element, or do a directive that manages the view, the isolated scope won't do any good, because you need to access the parent scope using the values in it. Simply, if you need to access parent scope, don't isolate de scope, if you don't, it can be better using link. – cagica Sep 29 '15 at 15:48
1

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

Community
  • 1
  • 1
Teliren
  • 342
  • 1
  • 5
1

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.

Moncef Hassein-bey
  • 1,361
  • 9
  • 14
  • Thanks @MoncefHasseinBey. I'm going to try this out. Can you please comment if I can use angular expressions in-place of text? Example: Instead of some-title="My Title", I'd like to do some-title="{{ ctrl.myTitle }}" – Ricky Sep 29 '15 at 15:01
  • 1
    yes, you can do this of course, I updated my demo to show you this. – Moncef Hassein-bey Sep 29 '15 at 15:04
0

Just try with this you will get values from attrs

link: 

function(scope, element, attrs) {
    alert(attrs.myParam);
},
d4Rk
  • 6,622
  • 5
  • 46
  • 60
CNandamuri
  • 1
  • 2
  • Thanks @d4Rk and CNandamuri. What are the advantages/drawbacks with using the link.attrs function versus the "scope" block in the directive return hash? Is there any? Or is this a matter of style/preference? – Ricky Sep 29 '15 at 15:24
-1
    .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!

Lior Ben Aharon
  • 125
  • 3
  • are you sure what you wrote there works ? Can you provide a plunkr especially with the clickCallback ? – sirrocco Sep 29 '15 at 14:14
  • hmm as far as I know you had to use & to be able to call the function. But it works both ways ..nice – sirrocco Sep 29 '15 at 18:09