CODEWITHSUNDEEP
javascriptangularjsscopedirective
kamyk
kamyk

Reputation: 295

Assign scope function with param from controller to var in directive

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.

Upvotes: 0

Views: 103

Answers (2)

pdenes
pdenes

Reputation: 802

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.)

Upvotes: 1

Paul Boutes
Paul Boutes

Reputation: 3315

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>

Upvotes: 1

Related Questions