He seguido tres botones en la parte superior de mi página con el cuadro de input debajo.
<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> Mi código de module con routes es
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' });
Básicamente, lo que bash hacer es que cuando se hace clic en uno de los botones, el ng-clic llama a la página corrosponding y pasa el parámetro "showName". Por favor, hágame saber cómo solucionarlo. Gracias
En primer lugar, debe indicarle a sus controlleres de destino (la página a la que se refiere) que debe esperar y aceptar un parámetro cuando naveguemos a esa página:
$routeProvider.when('/api/renameShow/:showName?', { controller: 'renameShowCtrl', templateUrl: '/templates/renameShow.html' })
El signo de interrogación después del parámetro indica que es un parámetro opcional. Puede lograr lo mismo con las tags de anclaje:
<a href="#/view2/mike">Go to view 2</a>
Si insistes en usar botones, escribe una function personalizada que se enganche con el ng-clic del button, y luego pasa el parámetro que desees así desde tu controller actual:
<button ng-click="customNavigate('Mike')">Rename Show</button>
Y en el controller:
$scope.customNavigate=function(msg){ $location.path("/view2"+msg) }
y luego en el controller de destino:
app.controller("renameShowCtrl",function($scope,$routeParams){ $scope.showName=$routeParams.showName });
Digamos que necesitamos psoid en 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' } ) });
En Controller – app.js:
app.controller('SoDtlController', function ($scope, $http, $location, $routeParams) { $scope.message = " $routeParams.psoid = " + $routeParams.psoid; });
Por lo tanto, puede usar psoid para mostrar datos en la página sodtl.html.