Angularjs1.0x中使用uirouter路由带参跳转的比较好的实现

一般如果直接在url路径后面直接加参数&＃xff0c;那么这个路径就写死了&＃xff0c;因为如果我以后有跳转到这个路径&＃xff0c;但是我并没有要带参数&＃xff0c;那么久无法匹配到路由路径&＃xff0c;就会出现错误。

http://www.cnblogs.com/panda-zhang/p/5318195.html这篇转的博文还是一个比较好的实现。

有时候我们需要把一个页面的参数传到另一个页面&＃xff0c;供另一个页面使用。下面讲一下利用路由传参的方法。

例如有两个页面&＃xff1a;page1.html和page2.html&＃xff0c;点击page1.html跳转到page2.html&＃xff0c;并将page1.html的参数传递过去。

&＃xff08;1&＃xff09;在app.js中定义路由信息,并在接收的页面&＃xff08;即page2.html&＃xff09;定义接收参数。

.state(&＃39;page1&＃39;, { url: &＃39;/page1&＃39;, templateUrl: &＃39;templates/page1.html&＃39;, controller: &＃39;pageOneCtrl&＃39; 
}) 
.state(&＃39;page2&＃39;, { url: &＃39;/page2&＃39;,templateUrl: &＃39;templates/page2.html&＃39;,controller: &＃39;pageTwoCtrl&＃39;,params:{&＃39;ID&＃39;:{}}
})

&＃xff08;2&＃xff09;在page1中定义点击事件。

html中&＃xff1a;ng-click&＃61;“toPage2(id)”

控制器中&＃xff1a;

.controller(&＃39;pageOneCtrl&＃39;, function ($scope, $state) {$scope.toPage2 &＃61; function (id) { $state.go(&＃39;page2&＃39;, {ID:id}); }; 
});

(3)在Page2中通过$staeParams获得参数ID。

.controller(&＃39;pageTwoCtrl’, function ($scope, $state, $stateParams) {var receivedId &＃61; $stateParams.ID;console.log(receivedId);//打印的结果即为id
});

这样就可以成功传递参数了。如果需要传递多个参数&＃xff0c;

&＃xff08;1&＃xff09;在app.js中定义路由信息,并在接收的页面&＃xff08;即page2.html&＃xff09;定义接收参数。

.state(&＃39;page1&＃39;, { url: &＃39;/page1&＃39;, templateUrl: &＃39;templates/page1.html&＃39;, controller: &＃39;pageOneCtrl&＃39; 
}) 
.state(&＃39;page2&＃39;, { url: &＃39;/page2&＃39;,templateUrl: &＃39;templates/page2.html&＃39;,controller: &＃39;pageTwoCtrl&＃39; ,params:{args:{}}
})

&＃xff08;2&＃xff09;在page1中定义点击事件。

html中&＃xff1a;

ng-click&＃61;“toPage2(name,number)”

控制器中&＃xff1a;

.controller(&＃39;pageOneCtrl&＃39;, function ($scope, $state) {$scope.toPage2 &＃61; function (name,number) { $state.go(&＃39;page2&＃39;, {args:{NAME:name,NUMBER:number}); }; 
});

(3)在Page2中通过$staeParams获得参数ID。

.controller(&＃39;pageTwoCtrl’, function ($scope, $state, $stateParams) {var receivedName &＃61; $stateParams.args.NAME;var receivedNumber &＃61; $stateParams.args.NUMBER;
});