Assign scope function with param from controller to var in directive

Question

Maybe the title isn't perfect - but I'm explaining shortly:

In my HTML I'm using ng-click directive: (I'm using few ng-clicks directives within my HTML code with different parameters (like 'main', 'action', 'more', etc..)

ng-click="clickMe('main')"

I have a controller to get the id - 'main':

.controller('clickCtrl', ['$scope', function ($scope) {
    $scope.clickMe= function (id) {
        console.log("button: " + id);
    }
}]);

I want to assign the $scope.clickMe in my directive link function and get the passed id value :

.directive('clickDir', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var click = scope.clickMe;

            click = function(id) {      //can I get the "id" here from controller also? 
                //some stuff
            }
    }}});

But it isn't working, could you help me?

EDIT

Some code from my HTML:

<div class="my-navbar">
    <ul click-dir>
        <li>
            <a ng-click="clickMe('main')" href="..." class="..."></a>
        </li>
    </ul>
</div>

<div class="action-navbar">
    <ul click-dir>
        <li ng-repeat="..."> //a lot of <li> generated by ng-repeat
            <a ng-click="clickMe('actions')" href="..." class="..."></a>
        </li>
    </ul>
</div>

<div class="search-navbar">
    <ul click-dir>
        <li ng-repeat="..."> //a lot of <li> generated by ng-repeat
            <a ng-click="clickMe('search')" href="..." class="..."></a>
        </li>
    </ul>
</div>

I want to get the id parameters from ng-click in the click-dir directive because I want to make some DOM manipulation.

In your directive, you assign scope.clickMe to click, then assign the anonymous function to click, why? — Joy
– Joy, Commented Aug 7, 2015 at 9:18
Do you want to invoke the controller's function from the directive and pass in the value to the controller function? — Tjaart van der Walt
– Tjaart van der Walt, Commented Aug 7, 2015 at 9:19
@Joy - maybe I'm doing something wrong, I just want to get the "id", but I don't know how to do it — kamyk
– kamyk, Commented Aug 7, 2015 at 9:21
How does your HTML look like? What exactly are you trying to achieve with the combination of ng-click and the custom directive? Maybe what you really want is to handle the click event in your directive...? — pdenes
– pdenes, Commented Aug 7, 2015 at 9:22
@TjaartvanderWalt - I want to invoke the controller's function from the directive and also get an id, I don't know that you understand me correctly — kamyk
– kamyk, Commented Aug 7, 2015 at 9:23

pdenes · Accepted Answer · 2015-08-07 10:39:32Z

1

If all you want is to handle the click event in your directive, then you can do it directly, without using ng-click. Something like this:

link: function (scope, element, attrs) {
    // get "id" from attrs or declare it in your directive config in scope
    element.on('click', function() {
        // use "id" here...
    });
}

If the "id" parameter is a simple string, you could do this:

scope: {
    clickDir: '@'
},
link: function (scope, element, attrs) {
    element.on('click', function() {
        // use scope.clickDir here...
    });
}

And the HTML would simply become:

<a click-dir='main'>...</a>

(Again, assuming you don't actually need to combine your controller/outer scope and the directive, other than passing the constant "id" values from the HTML.)

edited Aug 7, 2015 at 10:39

answered Aug 7, 2015 at 9:35

pdenes

8427 silver badges11 bronze badges

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

3 Comments

Tjaart van der Walt Over a year ago

I don't think this is the angular way.

pdenes Over a year ago

@Tjaart van der Walt: You may be right, it depends on what exactly we want to achieve here... I was thinking about clickDir being a directive that does some other stuff and also needs to handle click events. In that case I can see no point in involving ng-click and another controller. Maybe I'm missing something.

kamyk Over a year ago

Okay, finally I made it works, I think it's the best and simplest solution. Big thanks for help!

Paul Boutes · Accepted Answer · 2015-08-07 09:47:08Z

You can use the & angular binding, which allows the directive's isolate scope to pass values into the parent scope, for evaluation in the expression defined in the attribute, in our example we defined click attribute.

So you can define your function into your Controller, and bind her to your directive.

Controller

(function(){

function Controller($scope) {

  $scope.click = function(id){
    console.log('button : ' + id)
  }


}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

Directive

(function(){

  function clickDir() {
    return {
        restrict: "A",
        scope: {
          //Use '&' binding to evaluate expression
          click: '&'
        },
        link: function(scope, element, attr){
          //Listen for click event
          element.on('click', function(){
            //Call click controller function
            scope.click();
          });
        }
    };
  }

angular
  .module('app')
  .directive('clickDir', clickDir);


})();

HTML

  <body ng-app="app" ng-controller="ctrl">

    <button type="button" click-dir click="click('tata')">button</button>
    <button type="button" click-dir click="click('toto')">button2</button>
    <button type="button" click-dir click="click('titi')">button3</button>


  </body>

Collectives™ on Stack Overflow

Assign scope function with param from controller to var in directive

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related