CODEWITHSUNDEEP
javascriptangularjs
backtrack
backtrack

Reputation: 8144

Angular js click event

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,

Upvotes: 0

Views: 138

Answers (2)

AlainIb
AlainIb

Reputation: 4728

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

Upvotes: 1

DonJuwe
DonJuwe

Reputation: 4563

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.

Upvotes: 0

Related Questions