动态设置ui-sref Angularjs的值
我搜索过类似的问题，但出现的问题似乎略有不同。我正在尝试动态更改链接的ui-sref='‘(此链接指向向导表单的下一部分，下一部分取决于在下拉列表中所做的选择)。我只是尝试根据选择框中的某些选择来设置ui-sref属性。我可以通过绑定到作用域属性来更改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;
}或者，我使用指令来让它工作，方法是根据选择框(下拉框)上选择的选项生成具有所需ui-sref属性的超链接。
然而，这意味着每次从选择框中选择一个不同的选项时，我都必须重新创建链接，这会导致不希望的闪烁效果。我的问题是，是否有可能像我上面尝试的那样，通过在控制器中简单地改变url的值来改变ui-sref的值，或者我必须在每次做出选择时使用指令重新创建整个元素，就像我在下面所做的那样？(只是为了完整性而展示它)
Select option指令(此指令生成链接指令)
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>回答 13
Stack Overflow用户
发布于 2015-03-25 04:26:54
看起来这毕竟是可以做到的。
其中一位ui路由器作者在GitHub上的一个面包屑让我尝试了以下方法：
<a ng-href="{{getLinkUrl()}}">Dynamic Link</a>然后，在您的控制器中：
$scope.getLinkUrl = function(){
return $state.href('state-name', {someParam: $scope.someValue});
};事实证明，这就像是改变作用域的值等等的咒语。你甚至可以让'state-name‘字符串常量引用一个作用域的值，这也会更新视图中的href :-)
Stack Overflow用户
发布于 2014-06-22 17:31:06
这就是a working plunker。最简单的方法似乎是组合使用以下各项：
$state.href()(文档)
)和
ng-href(文档)
这些结合在一起可以用作：
<a ng-href="{{$state.href(myStateName, myParams)}}">因此，(遵循)具有这样的状态：
$stateProvider
.state('home', {
url: "/home",
...
})
.state('parent', {
url: "/parent?param",
...
})
.state('parent.child', {
url: "/child",
...我们可以更改这些值以动态生成href
<input ng-model="myStateName" />
<input ng-model="myParams.param" />在action here中检查它
原件：
有一个有效的例子how to实现了我们需要的东西。但不是使用动态ui-sref。
我们可以在这里查看：https://github.com/angular-ui/ui-router/issues/395
问:不支持动态ui-sref属性吗？
答:正确。
但是我们可以使用ui-router的不同特性：[$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>工作中的example
注意:还有更多指向$state.go定义的最新链接，但被弃用的链接对我来说更清楚一些
https://stackoverflow.com/questions/24349731
复制相似问题
腾讯云开发者
