angular js dynamically generate link

Question

I am very new to angular js and want to make a very simple website, that does the following: when clicking on a button, it will randomly generate a number, and if the number is odd, redirect to google, otherwise redirect to apple website. I have done the following:

<!doctype html>
<html lang="en" ng-app="homeapp">
<head> ... all imports </head>
<body ng-controller="homeappCtrl"> 
  <a href="{{urlToPick}}">Click</a>
</body>
</html>

and then in the controller.js, I have:

var homeapp= angular.module('homeappController', []);

homeappController.controller('homeappCtrl', ['$scope',
  function($scope) {
    if (Math.floor((Math.random() * 10) + 1)%2==0)
      {$scope.urlToPick = 'http://google.ca';}
    else
      {$scope.urlToPick = 'http://apple.com';}
  }]);

The problem is that when I click on the link, the urlToPick is not resolved and therefore the link returns error. (the link url is something like xxx/{{urlToPick}} )

I guess I have done something wrong but please tell me where... Thanks!

I strongly recommend you to use ng-href when generates links dynamically... you can face some problems if your html is generated before your link... — Poyraz Yilmaz
– Poyraz Yilmaz, Commented Jun 11, 2014 at 5:47

Joe · Accepted Answer · 2014-06-11 05:11:43Z

1

Your ng-app and your angular.module definitions are different.

Change

var homeapp= angular.module('homeappController', []);

to

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

answered Jun 11, 2014 at 5:11

Joe

2,5962 gold badges16 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

angular js dynamically generate link

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