angularjs directive pass parameter out controller

Question

I am sending a controller method to directive. I want to get parameter frpm direvtive like events.

var app = angular.module("app", []);

app.controller("outCtrl", function($scope){
        $scope.callOut = function(pramFromDirective){
        console.log(pramFromDirective);
    }
})


app.directive("myDir", function(){
  return {
            restrict: "E",
            scope: {
                call: "&"
        },
            controller: function($scope){
            $scope.call({message: 444});
        }
  }
})

I want to send a parameter to outCtrl.callOut() method. But it does not.

Nikos Paraskevopoulos · Accepted Answer · 2017-02-10 13:47:23Z

1

You have to add the parameter in the template, with the same name as the property of the object you pass to $scope.call(). Since you call it as $scope.call({message: 444}) do:

<my-dir call="callOut(message)"></my-dir>

answered Feb 10, 2017 at 13:47

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

barteloma Over a year ago

But a developer that using my directive can not know my inner parameter name in this stuation. He can send a wrong name

Nikos Paraskevopoulos Over a year ago

This is indeed a problem, but a different one. Can be solved with documentation or code conventions. Angular is doing it through documentation (see the $event argument of e.g. ngClick - check out the "Arguments" section).

seangwright · Accepted Answer · 2017-02-10 13:48:15Z

0

Your template isn't quite correct. You need to have the parameter in your callback method binding match the name of the object key you use in your directive match exactly.

<div ng-app="app">
  <div ng-controller="outCtrl">
    <my-dir call="callOut(message)"></my-dir>
  </div>
</div>

Angular isn't actually passing the parameter straight through. It maps the object keys from your directive function call parameter $scope.call({ message: 444 }) to parameter names of the method in the template call="callout(message)".

answered Feb 10, 2017 at 13:48

seangwright

18.3k7 gold badges47 silver badges57 bronze badges

1 Comment

barteloma Over a year ago

But a developer that using my directive can not know my inner parameter name in this stuation. He can send a wrong name.

Collectives™ on Stack Overflow

angularjs directive pass parameter out controller

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related