Angularjs passe le paramètre à une page de ng-click

j'ai les trois boutons suivants en haut de ma page avec la boîte de saisie en dessous.

<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>

mon code de module avec routes est

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

ce que J'essaie de faire, C'est que lorsque l'un des boutons est cliqué, le clic-ng appelle la page correspondante en passant le paramètre "showName" avec. S'il vous plaît laissez-moi savoir comment résoudre le problème. Merci

8
demandé sur J. Davidson 2014-03-19 09:14:57

2 réponses

tout d'abord, vous devez dire à vos contrôleurs de destination (la page à laquelle vous faites référence) d'attendre et d'accepter un paramètre lorsque nous naviguons vers cette page:

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

Le point d'interrogation après le paramètre indique que c'est un paramètre facultatif. Vous pouvez réaliser la même chose avec d'ancrage des balises:

<a href="#/view2/mike">Go to view 2</a>

si vous insistez sur l'utilisation des boutons, écrivez une fonction personnalisée accrochant sur le ng-click du bouton, puis passez quel que soit le paramètre que vous voulez comme ce à partir de votre contrôleur:

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

Et dans le contrôleur:

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

puis, dans le contrôleur de destination:

app.controller("renameShowCtrl",function($scope,$routeParams){
   $scope.showName=$routeParams.showName
});
14
répondu Mohammad Sepahvand 2015-10-09 07:22:20

disons que nous avons besoin de psoid dans sodtl.htm:

EN 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>

en AngularJs-app.js-Config:

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

dans Controller-app.js:

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

ainsi vous pouvez utiliser psoid dans l'affichage des données dans sodtl.la page html.

0
répondu Kaps 2017-07-29 20:00:16