Navigate to HTML page using ng-click

Question

I have button that I want it to :

1. Call multiple functions from the controller using ng-click(and I have to call them in HTML)

2. Navigate to another html page placed in "static/page.html"

onclick, when used to navigate (location.href), is override ng-click! Even when binding all the functions.

Here is the button tag :

<div ng-repeat="object in nc.objects">
 <button ng-click="fun1(object.id); fun2(object.name);">
 button
 </button>

button

$scope.fun1 = function (id) {

        var url = "/req/"+id;
        var Request = $http.get(url);
        Request.then(function (response) {
            $localStorage.var1  = response.data;

        });

    }

    $scope.fun2 = function (name) {

        var url = "/otherReq/"+name;
        var Request = $http.get(url);
        Request.then(function (response) {
            $localStorage.var2  = response.data;

        });

    }

ngRoute

myApp.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.

        when('/page2', {
            templateUrl: 'page2.html' <!-- also tried static/page2.html  but not working -->
        });

    }]);

in HTML

<button ng-click = "navigate(object.id, object.name, '/page2' )" > </button>

Answer 1

Oh boy, you are doing this all wrong. You don't need to navigate to another page from HTML. And you definitely shouldn't use onclick when working with Angular. That is just not the right way.

The way you'd want to do this is :

<button ng-click="objectClicked(object.id, object.name, someAngularRoute)>

Now before we move on, you need to understand what angularRoute is here. By route, I mean a view associated with someAngularRoute. Here someAngularRoute is basically your base url + someAngularRoute

So, when you say you want to open page1.html on button click, then you probably mean you want to open the route page1 whose templateUrl(or VIEW) is page1.html.

myApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      // will open the the window url is www.example.com/page1
      when('/page1', {
        templateUrl: 'static/page1.html' 
      }).
      // will open the the window url is www.example.com/page2
      when('/page2', {
        templateUrl: 'static/page2.html'  
      }).
      otherwise({
        redirectTo: '/404'
      });
  }]);

And then in the controller:

$scope.objectClicked = function (id, name, someAngularRoute) {
      func1(id);
      func2(name);
      $location.path(someAngularRoute);
    }

Ensure the $location is injected into your controller.

UPDATE

@vgrafe is right. I didn't see your updated question with fun1() making requests. But with so many things wrong, I kinda just lost track. ;)

Answer 2

It looks like, upon click on that link, you want to :

• make an api call
• store the data in localstorage
• navigate to the next page

What is missing from your approach is asynchronous management. The page is navigated directly an before letting the api calls return any data, which always take a short moment.

Luxor001's solution is a good first step, but probably need to wait for fun1 and/or fun2 to be done before navigating. Look up how promises work.

I think SLearner is the closest to the solution, but is not resolving the asynchonous api calls in his routing.

To leverage the async nature of your http calls, you need to return them from your functions.

Something like this would work :

$scope.fun1 = function (id) {
    var url = "/req/"+id;
    var Request = $http.get(url);
    return Request.then(function (response) {
        $localStorage.var1  = response.data;
    });
}

$scope.fun2 = function (name) {
    var url = "/otherReq/"+name;
    var Request = $http.get(url);
    return Request.then(function (response) {
        $localStorage.var2  = response.data;
    });
}

$scope.objectClicked = function (id, name, someAngularRoute) {
  $scope.func1(id)
  .then(function(func1result) {
      return $scope.func2(name);
  })
  .then(function(func2result) {
       $location.path(someAngularRoute);
  });
}

That being said, SLearner is right: you are doing everything wrong here :)

You should articulate your app's routing around ng-route of ui-router, and resolve the api calls in those routes. There are many tutorials in each of those libs documentations that will lead you into understanding how to write app routing properly.

Answer 3

Build some functions in your controller, and bind them to your ng-click. Like this way:

<button ng-click="clicked(object.id, 'page.html')>

and in your controller:

$scope.clicked = function(id, name, url){
    $scope.fun1(id);
    $scope.fun2(name); //or whatever you need to do..
    window.location = url; //this will change your browser location to the one specified.
}