pass parameter to angular directive on click

Question

I am trying to get parameter on click using directive.I want to get child data in the click event for checking has child or not.

.....

html

div ng-app="treeApp">
<ul>
    <treeparent></treeparent>

</ul>

js

(function () {
var treeApp = angular.module('treeApp', []);
treeApp.directive('treeparent', function () {
    return {
        restrict: 'E',
        template: "<button addchild child='m'>ajith</button><div id='new'></div>"
    }
});
treeApp.directive('addchild', function ($compile) {

    return {
        scope: {
            'child':'='
        },
        link: function (scope, element, attrs) {
            debugger;
            element.bind("click", function (scope,attrs) {
                debugger;

//here i want to get hild ie 'm'
 angular.element(document.getElementById('new')).append("<div><button button class='btn btn-default'>new one</button></div>");


                 });
        }
    }

});
})();

plz help me

It will be scope.child. Also remove this angular.element(document.getElementById('new')).append("<div><button button class='btn btn-default'>new one</button></div>"); - untill you went too far in totally wrong direction. — dfsq
– dfsq, Commented Jan 5, 2016 at 11:34
dfsq i want to append that div on click. thats y . can you suggest another way? — Ajith
– Ajith, Commented Jan 5, 2016 at 11:36

Anton Korneychuk · Accepted Answer · 2016-01-05 11:53:11Z

1

So, i think scope.child is undefined becouse it is overlaps in declaring event.

You can define variable before event binding

    link: function (scope, element, attrs) {
        var child = scope.child;
        element.bind("click", function (scope,attrs) {

           // here you can use child
           console.log('child', child);

        });
    }

or declare different argument names

    link: function ($scope, $element, attrs) {
        element.bind("click", function (scope,attrs) {

            // here you can use $scope.child
            console.log('$scope.child', $scope.child);

        });
    }

Is a callback has scope and attrs argument? May be it has only one $event argument?

    link: function (scope, element, attrs) {

        element.bind("click", function ($event) {

            // here you can use child
            console.log('child', scope.child);

        });
    }

edited Jan 5, 2016 at 11:53

answered Jan 5, 2016 at 11:38

Anton Korneychuk

7421 gold badge7 silver badges13 bronze badges

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

5 Comments

Ajith Over a year ago

Anton , sorry its not

Anton Korneychuk Over a year ago

callback for bind has only one $event argument

Ajith Over a year ago

is any way to call directive function from controller

Anton Korneychuk Over a year ago

Directive-controller or parent scope controller?

Anton Korneychuk Over a year ago

Yes, you can do it i created new answer, becouse comment can be only inline

Anton Korneychuk · Accepted Answer · 2016-01-05 12:29:27Z

0

Example for call method from directive in parent scope

parent template

<test-dir data-method="myFunc"></test-dir>
<button ng-click="myFunc('world')">click me</button>

or

<button test-dir data-method="myFunc" ng-click="myFunc('world')">click me</button>

directive

.directive('testDir', function() {
    return {
        scope: {
            method: '=',
        },
        controller : function($scope) {

            $scope.method = function(text) {
                alert('hello '+text);
            };

        },
    };
})

edited Jan 5, 2016 at 12:29

answered Jan 5, 2016 at 12:16

Anton Korneychuk

7421 gold badge7 silver badges13 bronze badges

Collectives™ on Stack Overflow

pass parameter to angular directive on click

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related