CODEWITHSUNDEEP
javascriptangularjs
yavg
yavg

Reputation: 3051

Trigger to click on an html element in angular.js

I currently have a directive. When I click on an element with the "click-to-edit" directive, a text field is displayed to edit the content.

enter image description here enter image description here

I want when I click on the button, this behavior continues to occur. I need that when the button is clicked, it is equivalent to click on the directive. How can I achieve this?

    <label>Sprint name:</label> <div click-to-edit type="inputText" ng-model="sprintName"></div>
    <br/>
    <input type='button' value='trigger Directive' ng-click='triggerDirective()'>
   </div>

https://codepen.io/anon/pen/JNQRLY

Upvotes: 0

Views: 1171

Answers (2)

The.Bear
The.Bear

Reputation: 5855

To achieve what you have to do, you can use angular events or you can share an object through isolate scope and add a function to it.

Examples:

1- With Angularjs Events: (PLUNKER)

HTML:

<div click-to-edit></div>
<button type="button" ng-click="item.toggle()">Toggle from Controller</button>

Controller:

app.controller('MainCtrl', function($scope) {
    $scope.toggle = function(){
        //Emit the event
        $scope.$broadcast('app.myEvent');
    };
});

Directive:

app.directive('clickToEdit', function() {
    return {
        restrict: 'A',
        template: `
            <div ng-show="editState">
                <div>
                    <input type="text"/>
                    <button type="button" ng-click="item.toggle()">Cancel</button>
                </div>
            </div>
        `,
        link: function (scope, element, attrs) {
            scope.editState = false;

            scope.toggle = function () {
                scope.editState = !scope.editState;
            }

            //Listen and handler the event
            scope.$on('app.myEvent', function(event){
                scope.toggle();
            });
        }
    }
});

2- Share object through isolate scope: (PLUNKER)

HTML:

<div click-to-edit item="item"></div>
<button type="button" ng-click="item.toggle()">Toggle from Controller</button>

Controller:

app.controller('MainCtrl', function($scope) {
    $scope.item = {};
});

Directive:

app.directive('clickToEdit', function() {
    return {
        restrict: 'A',
        scope: {
            item: '='
        }
        template: `
            <div ng-show="editState">
                <div>
                    <input type="text"/>
                    <button type="button" ng-click="item.toggle()">Cancel</button>
                </div>
            </div>
        `,
        link: function (scope, element, attrs) {
            scope.editState = false;

            //Here you add the function to the isolate scope 'item' variable
            scope.item.toggle = function () {
                scope.editState = !scope.editState;
            }
        }
    }
});

Upvotes: 1

Sujith
Sujith

Reputation: 1784

Modify the directive, inside which add click bind event for the button control. So when the directive is called , it binds the click event on your button. Hope this helps !

Upvotes: 0

Related Questions