AngularJS는 라우팅 모듈 ui-sref 명령을 통해 페이지 매개변수 전달 방법으로 점프합니다.-JS 튜토리얼-php.cn

AngularJS는 라우팅 모듈 ui-sref 명령을 통해 페이지 매개변수 전달 방법으로 점프합니다.

一个新手

풀어 주다： 2017-09-23 09:35:51

원래의

3520명이 탐색했습니다.

Route router.js

&#39;use strict&#39;;

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

로그인 후 복사

컨트롤러 컨트롤러

<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 템플릿

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

로그인 후 복사

라우트에서 매개변수 가져오기:
$state 서비스 아래에 $state.params 속성이 있습니다. params 속성은 json 개체이며, 이 json 개체에 포함된 데이터는 이전에 전달한 매개 변수입니다.

&#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);

}]);

로그인 후 복사

AngularJS 페이지 간 매개변수 전달 방법 요약:
①경로에 url 선언: '/url/:parameter';
②ui-sref="url({id:item.id})"를 통해 데이터 가져오기
3$state 서비스를 컨트롤러에 삽입하고 $state.params 속성을 사용하여 전달된 매개변수를 얻습니다.

AngularJS는 라우팅 모듈 ui-sref 명령을 통해 페이지 매개변수 전달 방법으로 점프합니다.