Question

我有按钮，我想要它：

使用ng-click从控制器调用多个函数（我必须用HTML调用它们）
导航到位于“static/page.html”的另一个html页面

onclick，用于导航（location.href）时，会覆盖ng-click！即使绑定所有功能。

以下是按钮标记：

<div ng-repeat="object in nc.objects">
 <button ng-click="fun1(object.id); fun2(object.name);">
 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 -->
        });

    }]);

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

Answer 1

在控制器中构建一些函数，并将它们绑定到ng-click。像这样：

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

并在您的控制器中：

$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.
}

Answer 2

哦，小伙子，你这样做是错的。您无需从HTML导航到其他页面。在使用Angular时，绝对不应该使用onclick。这不是正确的方法。

您想要这样做的方式是：

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

在我们继续之前，你需要了解angularRoute在这里。按路线，我的意思是与someAngularRoute相关联的视图。此处someAngularRoute基本上是您的基本网址+ someAngularRoute

因此，当您说要按下按钮时打开page1.html，那么您可能意味着要打开page1（或VIEW）为{{1}的路线templateUrl }}

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

确保将$ location注入您的控制器。

<强>更新

@vgrafe是对的。我没有看到$scope.objectClicked = function (id, name, someAngularRoute) { func1(id); func2(name); $location.path(someAngularRoute); }提出请求的更新问题。但是由于这么多事情错了，我只是失去了轨道。 ;）

Answer 3

看起来，点击该链接后，您想要：

拨打api电话
将数据存储在localstorage
导航到下一页

您的方法缺少的是异步管理。在让api调用返回任何数据之前直接导航页面，这总是需要一小段时间。

Luxor001的解决方案是一个很好的第一步，但可能需要在导航之前等待fun1和/或fun2完成。查看承诺如何运作。

我认为SLearner最接近解决方案，但并没有解决他的路由中的异步api呼叫。

要利用http调用的异步特性，您需要从函数中返回它们。

这样的事情会起作用：

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

话虽如此，SLearner是对的：你在这里做错了一切：）

您应该清楚地了解应用程序在ui-router的ng-route周围的路由，并解决这些路由中的api调用。每个libs文档中都有许多教程，可以帮助您了解如何正确编写应用程序路由。

使用ng-click导航到HTML页面

3 个答案: