Angular js click event

Question

I am using Angularjs. I want to navigate to other controller (detailscontroller) and the detail.html page by clicking the link from (Homecontroller). But while navigate to the detailscontroller i should pass the parameter value from Homecontroller. Below is my screenshot

enter image description here

By clicking delete it should navigate to the detailscontroller controller and trigger the below function

detailsController

myApp.controller("detailsController", function ($scope, $http,GENERAL_CONFIG,$filter) {

    $scope.getdetailsbyspider = function(spider){
        console.log(spider)

    }


});

Where as the spider should be from the Homecontroller ( the click value)

How can i do this ? Can anyone help me ?

UPDATE: My router

.when("/details", { templateUrl: 'Details.html', controller: 'detailsController' })

Home.html

<tbody>
               <tr ng-repeat="row in finished">
                   <td> {{row.project}} </td>
                <td> <a href="#details" ng-click="getdetailsbyspider(row)"> {{row.spider}}</a></td>

to get the above table

Update When i click the Spider name page should be navigate to the details.html with the spider name clicked.

In this example when i click on the delete it should navigate to the details.html and execute the getdetailsbyspider function in the detailscontroller with the spider name as delete

Thanks,

Are you use ngRoute? If use it, you can replace console.log with $location.path(/YourControllerPath) — dddd1919
– dddd1919, Commented Feb 10, 2015 at 8:00
i will do like dddd1919 says and add the parameter spide to the url — AlainIb
– AlainIb, Commented Feb 10, 2015 at 8:01
.when("/details", { templateUrl: 'Details.html', controller: 'detailsController' }) Here is my route info — backtrack
– backtrack, Commented Feb 10, 2015 at 8:02

AlainIb · Accepted Answer · 2015-02-10 08:32:55Z

1

i will do like dddd1919 says and add the parameter spide to the url in homecontroller :

       myApp.controller("HomeController", function ($scope, $http,GENERAL_CONFIG,$filter) {
         $scope.callGetDetail = function(spider){
            console.log("callGetDetail");
            $location.path("/YourDomaine/#/details/getdetailsbyspider="+spider);
        }
     });

in the view where you want to make the call, home.html

          <tbody>
           <tr ng-repeat="row in finished">
               <td> {{row.project}} </td>
            <td> <a href="#details" ng-click="callGetDetail(row)"> 
             {{row.spider}}</a>
            </td>

in the router

    when('/details/:params', {
        templateUrl: 'Details.html',
        controller: 'detailsController'
     }).

in the detailsController:

     myApp.controller("detailsController", function ($scope, $http, GENERAL_CONFIG, $filter,$routeParams) {
        $scope.getdetailsbyspider = function(spider){
            console.log("getdetailsbyspider "+ spider)
        }

        function myUrlToArray(url) {
           var paramsFormatted = {};
           var paramstmp = decodeURI(url).split("&");
           for (var index = 0; index < paramstmp.length; ++index) {
              var tmp = paramstmp[index].split("=");
              paramsFormatted[ tmp[0] ] = tmp[1];
           }
           return paramsFormatted;
        }
       var params =  myUrlToArray($routeParams.params)
       if(params.getdetailsbyspider != null ){
                  $scope.getdetailsbyspider(params.getdetailsbyspider);
        }
    });

edited Feb 10, 2015 at 8:32

answered Feb 10, 2015 at 8:18

AlainIb

4,6156 gold badges42 silver badges67 bronze badges

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

3 Comments

backtrack Over a year ago

I am new to angular. Where to add this $location.path("/YourDomaine/#/details/getdetailsbyspider="+spider)

backtrack Over a year ago

It is being called twice :(

AlainIb Over a year ago

what is been called twice ? what is displayed in the consol ?

DonJuwe · Accepted Answer · 2015-02-10 08:31:27Z

0

Based on your comment

the redirection is working fine. But the getdetailsbyspider is not able to access. Getting problem in the controller level i hope

the problem will be that the controller function

$scope.getdetailsbyspider = function(spider){
    console.log(spider)
}

is not part of the controller you are currently in when you trigger it. That means you call the function by clicking on a link in your home.html but the detailsController is not assigned to that view.

To prove that just copy the function into your HomeController (or whatever its name is) and you will see the logging will work.

answered Feb 10, 2015 at 8:31

DonJuwe

4,5634 gold badges37 silver badges60 bronze badges

Collectives™ on Stack Overflow

Angular js click event

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related