CODEWITHSUNDEEP
javascriptjqueryangularjs
Ajith
Ajith

Reputation: 393

pass parameter to angular directive on click

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

Upvotes: 1

Views: 1990

Answers (2)

Anton Korneychuk
Anton Korneychuk

Reputation: 722

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);
            };

        },
    };
})

Upvotes: 0

Anton Korneychuk
Anton Korneychuk

Reputation: 722

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

        });
    }

Upvotes: 1

Related Questions