0

I want to send a path by calling a function, by sending the path as function parameter.

However my controller code:

$scope.go = function(path){
    alert(path); //show the path comes in as parameter
    $location.path( path );
  }

My view code (.html)

<button ng-click="go('/hotellist/{{topHeading}}?tab=packages')" ></button>

I have checked {{topheading}} it gets the value of $scope.topheadingcorrectly, but when i am sending this using ng-clickit is getting no value at all! The alert is just saying '/hotelist/?tab=packages' .

Any Idea? why this is happening?

Md. Nahiduzzaman Rose
  • 442
  • 2
  • 9
  • 23
  • Duplicate? http://stackoverflow.com/questions/12647891/how-can-you-pass-a-bound-variable-to-an-ng-click-function – Juanjo Salvador Jul 18 '16 at 09:26
  • 1
    You ask Why, this may help you understand http://stackoverflow.com/questions/14050195/what-is-the-difference-between-and-in-directive-scope-in-angularjs – Steve Drake Jul 18 '16 at 09:31

7 Answers7

1

First, if you are going to be doing this a lot in your app, you should look at ui-router it will help you immensely.

Second, have you tried having a method return the url:

<button ng-click="vm.packagesPath()"></button>

And in your controller:

packagesPath() {
  return `/hotellist/${$scope.topHeading}?tab=packages`;
}

Your topHeading would obviously be on the scope. Try that, see if it works.

rrd
  • 5,789
  • 3
  • 28
  • 36
1

try

<button ng-click="go('/hotellist/' + topHeading + '?tab=packages')" ></button>
nikhil mehta
  • 972
  • 15
  • 30
1

On button click try this :

<button ng-click="go('/hotellist/'+topHeading+'?tab=packages')" ></button>
Rohan Sahu
  • 11
  • 3
0

You can not send scope variables like this. Use only topheading in ng-click.

Niklaus
  • 65
  • 1
  • 7
0

You don't need to use brackets inside ngClick. The correct way is:

<button ng-click="go('/hotellist/topHeading?tab=packages')"></button>
Juanjo Salvador
  • 1,073
  • 1
  • 12
  • 33
0

Try this,

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$location) {
$scope.topHeading = "test";  
$scope.go = function(path){
    console.log(path);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


 <body ng-app="plunker" ng-controller="MainCtrl">
   <button ng-click="go('/hotellist/'+topHeading+'?tab=packages')">GO</button>
    
  </body>
rejo
  • 3,352
  • 5
  • 27
  • 34
0

It is not working because there is no value in that scope variable. I tried this code and it worked.

First I have set the Scope variable value with another function using ng-init. Then I used that value in ng-click.

HTML

<div ng-app="myApp" ng-controller="myCtrl" ng-init="SetScopeVariable()">
Name: <input type="button" ng-click="getPath('/hotellist/'+topHeading+'?tab=packages')">

Script

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.SetScopeVariable=function(){
$scope.topHeading='123';
}
$scope.getPath=function(path){
alert(path);
}
});

Niklaus
  • 65
  • 1
  • 7