Heim  >  Artikel  >  Web-Frontend  >  AngularJS springt über die Routing-Modul-Anweisung ui-sref zur Übergabemethode für Seitenparameter

AngularJS springt über die Routing-Modul-Anweisung ui-sref zur Übergabemethode für Seitenparameter

一个新手
一个新手Original
2017-09-23 09:35:513495Durchsuche

Route router.js

'use strict';

angular.module('app').config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  $stateProvider.state('main', {
    url: '/main',
    templateUrl: 'view/main.html',
    controller: 'mainCtrl'
  }).state('position', {
    url: '/position/:id',                  //这里需要传入一个id的参数放在url后面传递过去
    templateUrl: 'view/position.html',
    controller: 'positionCtrl'
  });
  $urlRouterProvider.otherwise('main');
}])

Controller-Controller

<p style="margin-bottom: 7px;">&#39;use strict&#39;angular.module(&#39;app&#39;).controller(&#39;mainCtrl&#39;,[&#39;$scope&#39;,function($scope){<br/>    $scope.list = [{<br/>        id:&#39;1&#39;,                             //将这个id写到页面上<br/>        name:&#39;销售&#39;,<br/>        imgSrc:&#39;image/company-3.png&#39;,<br/>        companyName: &#39;千度&#39;,<br/>        city: &#39;上海&#39;,<br/>        industry: &#39;互联网&#39;,<br/>        time: &#39;2016-06-01 11:05&#39;<br/>    },{<br/>        id:&#39;2&#39;,<br/>        name:&#39;WEB前端&#39;,<br/>        imgSrc:&#39;image/company-1.png&#39;,<br/>        companyName: &#39;慕课网&#39;,<br/>        city: &#39;北京&#39;,<br/>        industry: &#39;互联网&#39;,<br/>        time: &#39;2016-06-01 01:05&#39;<br/>    }];<br/>}]);<br/></p>

HTML-Vorlage

<ul class="bg-w position-list">//通过ui-sref="position({id:item.id})"的方式将参数传递过去    
            <li ui-sref="position({id:item.id})" class="item" ng-repeat="item in data">
        <img class="f-l logo" ng-src="{{item.imgSrc}}" alt="">
        <h3 class="title" ng-bind="item.name"></h3>
        <p class="text" ng-bind="item.companyName+&#39;
                [&#39;+item.city+&#39;]&#39;+&#39; &#39;+item.industry"></p>
        <p class="text" ng-bind="item.time"></p>
    </li></ul>

Routenparameter abrufen:
Inject $state Service, Es gibt ein $state.params-Attribut unter dem $state-Dienst. Dieses $state.params-Attribut ist ein JSON-Objekt. Die in diesem JSON-Objekt enthaltenen Daten sind die Parameter, die wir zuvor übergeben haben.

&#39;use strict&#39;;
angular.module(&#39;app&#39;).controller(&#39;positionCtrl&#39;,[&#39;$q&#39;,&#39;$http&#39;,&#39;$state&#39;,&#39;$scope&#39;,function ($q,$http,$state,$scope) {

              //获取id的参数,并用$http请求对应的数据
              $http.get(&#39;/data/position?id=&#39;+$state.params.id).success(fn1).error(fn2);

}]);

Eine Zusammenfassung der seitenübergreifenden Parameterübergabemethoden von AngularJS:
①URL deklarieren: '/url/:parameter' in der Route;
②Daten über die Benutzeroberfläche abrufen - Hängen Sie die Parameter hinter der URL ein, indem Sie sref="url({id:item.id})" verwenden. ③Injizieren Sie den $state-Dienst in den Controller und verwenden Sie das Attribut $state.params, um die übergebenen Parameter abzurufen.

AngularJS springt über die Routing-Modul-Anweisung ui-sref zur Übergabemethode für Seitenparameter

Das obige ist der detaillierte Inhalt vonAngularJS springt über die Routing-Modul-Anweisung ui-sref zur Übergabemethode für Seitenparameter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn