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