Angularjs从ng-click向页面传递参数

Question

我页面顶部有以下三个按钮，下方是输入框。

<div>
  <form>
          <div>
              Enter Show Name<input type="text" ng-model="showName" />
          </div>
      </form>
</div>
<div>
<button ng-click="href="/api/renameShow"">Rename Show</button>
<button ng-click="href="/api/updateShow"">Update  Show</button>
<button ng-click="href="/api/checkShow"">Check   Show</button>
</div>

我的模块代码及路由如下：

    var showApp = angular.module("showApp", ["ngRoute", "ngResource", "ui"]).
    config(function ($routeProvider, $locationProvider) {
        $routeProvider.
            when('/',
            {
                controller: '',
                templateUrl: 'main.html'
            }).
            when('/api/renameShow', { controller: 'renameShowCtrl', templateUrl:     '/templates/renameShow.html' }).
            when('/api/updateShow', { controller: 'updateShowCtrl', templateUrl:     '/templates/updateShow.html' }).
when('/api/checkShow', { controller: 'checkShowCtrl', templateUrl: '/templates/checkShow.html' });

基本上，我想要做的是当其中一个按钮被点击时，ng-click调用相应的页面并传递参数“showName”。 请告诉我如何修复它。谢谢。

- J. Davidson

---

有没有使用按钮的特定原因，而你可以使用一个锚定标记href="/api/checkShow/{{showName}}"，然后在路由处理中使用/api/checkShow/:id来处理它？ - Vinod Louis

这个路由应该是这样的吧？when('/api/checkShow/:id', { controller: 'checkShowCtrl', templateUrl: '/templates/checkShow.html' }) - J. Davidson

是的，你可以参考这个链接：http://docs.angularjs.org/api/ngRoute/service/$route - Vinod Louis

@J.Davidson，Vinod已经说得很正确了，不要使用按钮进行页面转发，可以使用锚点标签。如果你需要强制使用按钮，那么就在ng-click后面跟随一个函数，在其中使用location.url('/api/checkShow/'+id)。最好还是使用锚点。 - RONE

Answer 1

首先，您需要告诉目标控制器（您正在引用的页面）在导航到该页面时预期并接受参数：

首先，您需要告诉目标控制器（您正在引用的页面）在导航到该页面时预期并接受参数：

$routeProvider.when('/api/renameShow/:showName?', { 
  controller: 'renameShowCtrl', 
  templateUrl:     '/templates/renameShow.html' 
})

参数后面的问号表示它是可选参数。您可以使用锚标签实现相同的效果：

<a href="#/view2/mike">转到视图2</a>

如果您坚持使用按钮，请编写一个自定义函数，将其挂钩到按钮的ng-click上，然后从当前控制器传递任何您想要的参数，如下所示：

<button ng-click="customNavigate('Mike')">Rename Show</button>

在控制器中：

    $scope.customNavigate=function(msg){
       $location.path("/view2"+msg)
    }

然后在目标控制器中：

app.controller("renameShowCtrl",function($scope,$routeParams){
   $scope.showName=$routeParams.showName
});

- Mohammad Sepahvand

---

我认为您在路径中漏掉了一个斜杠：$scope.customNavigate=function(msg){ $location.path("/view2/"+msg) } - Sagi

否则是很好的答案。 - Sagi

Answer 2

假设我们需要在sodtl.htm中使用psoid：

在HTML - so.html中：

<tr ng-controller="SoController" ng-repeat="x in sos">
            <td>{{x.date}}</td>
            <td><a href="#/sodtl/{{x.soid}}">Dtl</a></td>
</tr>

在AngularJs中 - app.js - 配置：

 app.config(function ($routeProvider)
    {    
        $routeProvider.
        when ('/sodtl/:psoid?',
                {
                    templateUrl : 'pages/sodtl.html',
                    controller  : 'SoDtlController'
                }
              )
    });

在控制器 - app.js 中：

app.controller('SoDtlController', function ($scope, $http, $location, $routeParams) {
    $scope.message = " $routeParams.psoid = " + $routeParams.psoid;
});

因此，您可以在sodtl.html页面中使用psoid来显示数据。

- Kaps