Trigger to click on an html element in angular.js

Question

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.

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

haven't looked too deeply through the code but one thing to consider is using an angular event that gets broadcast in `triggerDirective()` and listen for it in directive — charlietfl, May 30 '17 at 00:38
Sorry, I'm new to angular, I have no idea how to do it. Can you help me please? — yavg, May 30 '17 at 00:41
@charlietfl You can give me a link, example or something like that, I do not know how to search... — yavg, May 30 '17 at 00:54
[all-about-angulars-emit-broadcast-on-publish-subscribing](https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/) — charlietfl, May 30 '17 at 01:15

score 1 · Accepted Answer · answered May 30 '17 at 01:33

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

I appreciate your time, but this is complex, my idea is to include each button in a ng-repeat and when I click the button, I want the corresponding text field to appear. — yavg, May 30 '17 at 01:50
So, you can take advantage of second approach. Isn't too complex do it inside of `ng-repeat`, I will update my answer. But where do you place the toggleDirective button if you have an ng-repeat? What should do that button? Toggle all records? — The.Bear, May 30 '17 at 01:59
look this picture. you are very friendly http://i.imgur.com/TGbjjTl.jpg — yavg, May 30 '17 at 02:02
So, you have a toggle button for each item of ng-repeat.. something like this [PLUNKER](http://plnkr.co/edit/s5ay16Cs4ByBuPlUb0Km?p=preview) (obliviously is not an accordion, is just a table, but is the same approach) — The.Bear, May 30 '17 at 02:20
Yes, I'm from Argentina. If you want I can update my answer. — The.Bear, May 30 '17 at 02:42
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/145400/discussion-between-yavg-and-the-bear). — yavg, May 30 '17 at 02:50

score 0 · Answer 2 · answered May 30 '17 at 00:41

0

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 !

answered May 30 '17 at 00:41

Sujith

1,604
9
16

Can you please give me an example? My idea is to have this in a ng-repeat. And each button should do what I want, according to the button clicked... – yavg May 30 '17 at 00:42

Trigger to click on an html element in angular.js

2 Answers2