dynamic设置ui-sref Angularjs的值
我已经search了一个类似的问题，但是出现的问题似乎稍有不同。 我试图dynamic改变链接的ui-sref ='（这个链接指向向导表单的下一部分，下一部分取决于下拉列表中的select）。 我只是试图设置ui-sref属性取决于select框中的一些select。 我可以通过绑定到select时设置的范围属性来更改ui-sref。 但链接不起作用，这是可能的吗？ 谢谢
<a ui-sref="form.{{url}}" >Next Section</a> 然后在我的控制器中，我这样设置url参数
switch (option) { case 'A': { $scope.url = 'sectionA'; } break; case 'B': { $scope.url = 'sectionB'; } break; }
或者，我使用指令来使其工作，根据在select框中select的选项（下拉）生成具有所需ui-sref属性的超链接。
但是，这意味着每次从select框中select不同的选项时，都必须重新创build链接，这会导致不希望的闪烁效果。 我的问题是，是否有可能改变ui-sref的值，我试着通过简单地改变我的控制器中的url值，或者我必须重新创build整个元素使用指令，每次select是按照我在下面做的？ （只是显示完整性）
select选项指令（该指令生成链接指令）
define(['app/js/modules/app', 'app/js/directives/hyperLink'], function (app) { app.directive('selectUsage', function ($compile) { function createLink(scope,element) { var newElm = angular.element('<hyper-link></hyper-link>'); var el = $(element).find('.navLink'); $(el).html(newElm); $compile(newElm)(scope); } return { restrict: 'E', templateUrl: '/Client/app/templates/directives/select.html' ,link: function (scope, element, attrs) { createLink(scope, element); element.on('change', function () { createLink(scope,element); }) } } })
超链接指令
define(['app/js/modules/app'], function (app) { app.directive('hyperLink', function () { return { restrict: 'E', templateUrl: '/Client/app/templates/directives/hyperLink.html', link: function (scope, element, attrs) { } } })
超链接模板
<div> <button ui-sref="form.{url}}">Next Section</button> </div>
有一个工作的笨蛋 。 最简单的方法似乎是使用以下组合：
-
$state.href()（doc here ）和 -
ng-href（doc here ）
这些一起可以用作：
<a ng-href="{{$state.href(myStateName, myParams)}}">
所以， （继这个笨蛋之后 ）有这样的状态：
$stateProvider .state('home', { url: "/home", ... }) .state('parent', { url: "/parent?param", ... }) .state('parent.child', { url: "/child", ...
我们可以改变这些值来dynamic生成href
<input ng-model="myStateName" /> <input ng-model="myParams.param" />
在这里检查它的行动
原版的：
有一个工作的例子， 如何实现我们所需要的。 但不是dynamic的ui-sref 。
我们可以在这里查看： https ： //github.com/angular-ui/ui-router/issues/395
问：[A]不支持dynamicui-sref属性？
A：正确。
但是我们可以使用ui-router不同function： [$state.go("statename")][5]
所以，这可能是控制器的东西：
$scope.items = [ {label : 'first', url: 'first'}, {label : 'second', url: 'second'}, {label : 'third', url: 'third'}, ]; $scope.selected = $scope.items[0]; $scope.gotoSelected = function(){ $state.go("form." + $scope.selected.url); };
这里是HTML模板：
<div> choose the url: <select ng-model="selected" ng-options="item.label for item in items" ></select> <pre>{{selected | json}}</pre> <br /> go to selected <button ng-click="gotoSelected()">here</button> <hr /> <div ui-view=""></div> </div>
工作的例子
注意：有更多最新的链接到$ state.go定义，但不赞成使用的一个更清晰一点
看起来这毕竟是可以做到的。
一个ui路由器作者在GitHub上的面包屑导致我尝试以下方法：
<a ng-href="{{getLinkUrl()}}">Dynamic Link</a>
然后，在你的控制器中：
$scope.getLinkUrl = function(){ return $state.href('state-name', {someParam: $scope.someValue}); };
事实certificate，这就像一个魅力瓦特/改变范围值和所有。 你甚至可以使'国家名'string常量引用作用域值，并将更新视图中的href 🙂
看看这个问题＃2944 。
ui-sref不监视状态expression式，可以使用ui-state和ui-state-params传递variables。
<a data-ui-state="selectedState.state" data-ui-state-params="{'myParam':aMyParam}"> Link to page {{selectedState.name}} with myParam = {{aMyParam}} </a>
票中还提供了一个快速演示 。
我设法实现这种方式（我使用的是controllerAs变种，但不是通过$范围）。
模板
<button ui-sref="main({ i18n: '{{ ctrlAs.locale }}' })">Home</button>
调节器
var vm = this; vm.locale = 'en'; // or whatever dynamic value you prepare
另请参阅ui-sref文档，您可以在其中传递参数：
https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref
在尝试了各种解决scheme后，我在angular.ui.router代码中发现了这个问题。
问题来自ui.router update方法是由ref.state触发的，这意味着无法更新单击元素时使用的href的值。
这里有2个解决scheme来解决这个问题：
自定义指令
module.directive('dynamicSref', function () { return { restrict: 'A', scope: { state: '@dynamicSref', params: '=?dynamicSrefParams' }, link: function ($scope, $element) { var updateHref = function () { if ($scope.state) { var href = $rootScope.$state.href($scope.state, $scope.params); $element.attr('href', href); } }; $scope.$watch('state', function (newValue, oldValue) { if (newValue !== oldValue) { updateHref(); } }); $scope.$watch('params', function (newValue, oldValue) { if (newValue !== oldValue) { updateHref(); } }); updateHref(); } }; });
使用它的HTML非常简单：
<a dynamic-sref="home.mystate" dynamic-sref-params="{ param1 : scopeParam }"> Link </a>
修复ui.router代码：
在angular.router.js中，你会发现指令$StateRefDirective （版本为0.3的4238行）。
将指令代码更改为：
function $StateRefDirective($state, $timeout) { return { restrict: 'A', require: ['?^uiSrefActive', '?^uiSrefActiveEq'], link: function (scope, element, attrs, uiSrefActive) { var ref = parseStateRef(attrs.uiSref, $state.current.name); var def = { state: ref.state, href: null, params: null }; var type = getTypeInfo(element); var active = uiSrefActive[1] || uiSrefActive[0]; var unlinkInfoFn = null; var hookFn; def.options = extend(defaultOpts(element, $state), attrs.uiSrefOpts ? scope.$eval(attrs.uiSrefOpts) : {}); var update = function (val) { if (val) def.params = angular.copy(val); def.href = $state.href(ref.state, def.params, def.options); if (unlinkInfoFn) unlinkInfoFn(); if (active) unlinkInfoFn = active.$$addStateInfo(ref.state, def.params); if (def.href !== null) attrs.$set(type.attr, def.href); }; if (ref.paramExpr) { scope.$watch(ref.paramExpr, function (val) { if (val !== def.params) update(val); }, true); def.params = angular.copy(scope.$eval(ref.paramExpr)); } // START CUSTOM CODE : Ability to have a 2 way binding on ui-sref directive if (typeof attrs.uiSrefDynamic !== "undefined") { attrs.$observe('uiSref', function (val) { update(val); if (val) { var state = val.split('(')[0]; def.state = state; $(element).attr('href', $state.href(def.state, def.params, def.options)); } }); } // END OF CUSTOM CODE update(); if (!type.clickable) return; hookFn = clickHook(element, $state, $timeout, type, function () { return def; }); element.bind("click", hookFn); scope.$on('$destroy', function () { element.unbind("click", hookFn); }); } }; }
来回答这个好:)
幸运的是，您不需要使用button进行ng-click ，或者使用ng-href中的函数来实现您所寻求的function。 代替;
你可以在你的控制器中创build一个$scope var，并在其中分配ui-srefstring，并在你的视图中使用它作为ui-sref属性。
喜欢这个：
// Controller.js // if you have nasted states, change the index [0] as needed. // I'm getting the first level state after the root by index [0]. // You can get the child by index [1], and grandchild by [2] // (if the current state is a child or grandchild, of course). var page = $state.current.name.split('.')[0]; $scope.goToAddState = page + ".add"; // View.html <a ui-sref="{{goToAddState}}">Add Button</a>
这对我来说是完美的。
最好的方法是在button的ng-click指令上使用uiRouter's $state.go('stateName', {params}) 。 如果没有select选项，则禁用该button。
HTML
<select ng-model="selected" ng-options="option as option.text for option in options"></select> <button ng-disabled="!selected" type="button" ng-click="ctrl.next()">Next</button>
调节器
function Controller($scope, $state){ this.options = [{ text: 'Option One', state: 'app.one', params: { param1: 'a', param2: 'b' } },{ text: 'Option Two', state: 'app.two', params: { param1: 'c', param2: 'd' } },{ text: 'Option Three', state: 'app.three', params: { param1: 'e', param2: 'f' } }]; this.next = function(){ if(scope.selected){ $state.go($scope.selected.state, $scope.selected.params || {}); } }; }
州
$stateProvider.state('wizard', { url: '/wizard/:param1/:param2', // or '/wizard?param1¶m2' templateUrl: 'wizard.html', controller: 'Controller as ctrl' });
这只是为我工作
在控制器中
$scope.createState = 'stateName';
在视图中
ui-sref="{{ createState }}"
为了使用ui-srefpipe理多个dynamic参数 ，这里我的解决scheme：
HTML：（ 'MyPage.html'）
<button type="button" ui-sref="myState(configParams())">
控制器:( 'MyCtrl'）
.controller('MyCtrl', function ($scope) { $scope.params = {}; $scope.configParams = function() { $scope.params.param1 = 'something'; $scope.params.param2 = 'oh again?'; $scope.params.param3 = 'yes more and more!'; //etc ... return $scope.params; }; }
stateProvider：（ 'myState'）
$stateProvider .state('myState', { url: '/name/subname?param1¶m2¶m3', templateUrl: 'MyPage.html', controller: 'MyCtrl' });
请享用 ！
<ul class="dropdown-menu"> <li ng-repeat="myPair in vm.Pairs track by $index"> <a ui-sref="buy({myPairIndex:$index})"> <span class="hidden-sm">{{myPair.pair}}</span> </a> </li> </ul>
如果有人只想在Angularjs中dynamic设置ui-sref的$ stateParams。 注意：在检查元素中它仍然会显示为“buy（{myPairIndex：$ index}）”，但是$ index将会在这个状态下被获取。
或者就像这样：
<a ui-sref="{{ condition ? 'stateA' : 'stateB'}}"> Link </a>
