Angular on button click outside ctrl, pass button id

Question

I want to call a function from outside the controller and pass it the button id. This is my current code :

<button class="btn btn-primary manageCompany" id=<%=comp._id%> data-toggle="modal" data-target="#manageCompany_pp" ng-click="clickMe()">Manage</button>
// .. More code


                <div class="modal fade" ng-controller="ModalCtrl" id="manageCompany_pp" tabindex="-1" cid="" role="dialog" aria-labelledby="manageCompany_pp">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title" id="manageCompany_content">Manage Company</h4>
                            </div>
                            <div class="modal-body">
                                <div class='manageCompanyAlert'></div>
                              {{testData}}
                                <script>  </script>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

And this is the content of my controller

app.controller('ModalCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.clickMe = function() {
        $http.post('/modalRoutes/cdata', {
            id: 0 // Button ID should go here 
        }).success(function(cdata) {
            $scope.testData = cdata;
        });
    };
}]);

EDIT: For now it seems that the best way was just to create a main controller for the whole page and handle it from there.

why you don't define the controller with parent div that contains the button? — mhd
– mhd, Commented Jun 27, 2016 at 17:14
There is A LOT of code in between, all the modal are at the end of the code since they are only opened on click. — Trax
– Trax, Commented Jun 27, 2016 at 17:18
the remain solution is to move clickMe function to the parent controller. I mean the controller of the div that contains the button — mhd
– mhd, Commented Jun 27, 2016 at 17:23

Malk · Accepted Answer · 2016-06-27 17:08:57Z

2

You should be able to pass the id into the function directly:

ng-click="clickMe(<%=comp._id%>)"

And:

app.controller('ModalCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.clickMe = function(id) {
        $http.post('/modalRoutes/cdata', {
            id: id
        }).success(function(cdata) {
            $scope.testData = cdata;
        });
    };
}]);

answered Jun 27, 2016 at 17:08

Malk

12k4 gold badges35 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

Angular on button click outside ctrl, pass button id

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related