动态设置的值UI的SREF Angularjs [英] Dynamically set the value of ui-sref Angularjs
问题描述
我已经寻找了类似的问题，但想出的那些似乎略有不同。
我试图动态地改变一个链接的UI-SREF =''（该链接指向一个向导形式的下部分和下一部分依赖于下拉列表中所做的选择）。我只是想这取决于一个选择框选择一些设置UI的SREF属性。我能够更改UI-SREF通过结合这是当一个选择时设置了scope属性。然而链接不起作用，这是可能的呢？谢谢
＆LT;形式{{URL}}一个UI的SREF =＆gt;接下来章节＆lt; / A＆GT;
，然后在我的控制，我设定的URL参数这样
开关（选项）{
案例'A'：{
$ scope.url ='部1.';
}打破;
案例'B'：{
$ scope.url ='sectionB';
}打破;
}
另外，我用指令来让它通过生成具有所需UI的SREF属性的超级链接根据在选择框（下拉）所选择的选项工作。
Hhowever这意味着我必须到不同的选项，从中产生的不良闪烁效果的选择框选择每次重新创建链接。
我的问题是这样的，是有可能改变的价值与UI SREF或者我试图通过simpling改变我的控制器URL的值以上做做我每次都选择使用指令来重新创建整个元素被制成下面我做了什么？ （只是显示这个完整性）
选择选项指令（该指令生成链接指令）
定义（['应用程序/ JS /模块/应用程序，应用程序/ JS /指令/超链接']，功能（应用程序）{
app.directive（'selectUsage'，函数（$编译）{ 函数建立连结（范围，元素）{
VAR newElm = angular.element（'＆LT;超链接＆GT;＆LT; /超链接＆GT;'）;
VAR EL = $（元素）.find（'navLink。'）;
$（EL）的.html（newElm）;
$编译（newElm）（范围）;
} 返回{ 限制：'E'，
templateUrl：/Client/app/templates/directives/select.html ，链接：功能（范围，元素，ATTRS）{ 建立连结（范围，元件）; element.on（'变'，函数（）{
建立连结（范围，元件）;
}）
}
}
}）
超链接指令
定义（['应用程序/ JS /模块/应用程序']，功能（应用程序）{
app.directive（'超级链接'，函数（）{ 返回{
限制：'E'，
templateUrl：/Client/app/templates/directives/hyperLink.html'，
链接：功能（范围，元素，ATTRS）{}
}}）
超链接模板
＆LT; DIV＆GT;
＆LT;按钮的UI SREF ={形式的url}}＆gt;接下来章节＆lt; /按钮＆GT;
＆LT; / DIV＆GT;
有
这些一起可以用作
＆LT;一个NG-HREF ={{$ state.href（myStateName，myParams）}}＆GT;
因此，（以下这plunker ）的有这样的状态
$ stateProvider
.STATE（'家'，{
网址：/家，
...
}）
.STATE（'父'，{
网址：/父参数，
...
}）
.STATE（'parent.child'，{
网址：/子，
...
我们可以改变这些值来动态生成的 HREF
＆LT;输入NG模型=myStateName/＆GT;
＆LT;输入NG模型=myParams.param/＆GT;
检查它在这里 行动
原文：
有一个工作的例子如何实现的我们所需要的。但不能与动态 UI-SREF 。
正如我们可以检查在这里：<一href=\"https://github.com/angular-ui/ui-router/issues/395\">https://github.com/angular-ui/ui-router/issues/395
Q：[A]重新动态UI-SREF属性不支持结果
答：正确不过，我们可以使用
UI路由器的不同特点：[$ state.go（Statename的）] [5]所以，这可能是控制器的东西：
$ scope.items = [
{标号：第一，网址：'第一'}，
{标号：第二个，网址：'第二个'}，
{标号：第三，网址：'第三'}，
];
$ scope.selected = $ scope.items [0];
$ scope.gotoSelected =功能（）{
$ state.go（的形式。+ $ scope.selected.url）;
};这里是HTML模板：
＆LT; DIV＆GT;
选择的网址：
＆LT;选择
NG-模式=选择
NG-选项=item.label为项目中的项目
＆GT;＆LT; /选择＆GT; ＆LT; pre＆GT; {{选择| JSON}}＆LT; / pre＆GT;
＆LT; BR /＆GT;
去选择
＆LT;按钮NG点击=gotoSelected（）＆GT;此处＆lt; /按钮＆GT; ＆LT;小时/＆GT;
＆LT;格UI视图=＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;工作例如
请注意：有更多的最新的的链接的 $ state.go 定义，但去precated一个是多一点我清楚
I have searched for a similar question but the ones that came up seem slightly different. I am trying to change the ui-sref='' of a link dynamically (this link points to the next section of a wizard form and the next section depends on the selection made on the dropdown list). I am simply trying to set the ui-sref attribute depending on some selection in a select box. I am able to change the ui-sref by binding to a scope attribute which is set when a selection is made. however the link does not work, is this possible at all? thanks
<a ui-sref="form.{{url}}" >Next Section</a>and then in my controller, I set the url parameter this way
switch (option) { case 'A': { $scope.url = 'sectionA'; } break; case 'B': { $scope.url = 'sectionB'; } break; }Alternatively, I used directives to get it to work by generating the hyperlink with the desired ui-sref attribute according to the option selected on the select box (drop down).
Hhowever this means I have to re-create the link each time a different option is selected from the selectbox which causes an undesirable flickering effect. My question is this, is it possible to change the value of the ui-sref as I tried doing above by simpling changing the value of url in my controller or do I have to re-create the entire element using a directive each time a selection is made as I have done below? (just showing this for completeness)
Select option directive (this directive generates the link directive)
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); }) } } })
Hyperlink directive
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) { } } })
Hyperlink template
<div> <button ui-sref="form.{url}}">Next Section</button> </div>
解决方案There is a working plunker. The most easier way seems to be to use combination of:
These together could be used as:
<a ng-href="{{$state.href(myStateName, myParams)}}">So, (following this plunker) having states like these:
$stateProvider .state('home', { url: "/home", ... }) .state('parent', { url: "/parent?param", ... }) .state('parent.child', { url: "/child", ...We can change these values to dynamically generate the href
<input ng-model="myStateName" /> <input ng-model="myParams.param" />Check it in action here
ORIGINAL:
There is a working example how to achieve what we need. But not with dynamic
ui-sref.As we can can check here: https://github.com/angular-ui/ui-router/issues/395
Q: [A]re dynamic ui-sref attributes not supported?
A: Correct.But we can use different feature of
ui-router:[$state.go("statename")][5]So, this could be the controller stuff:
$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); };And here is the HTML template:
<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>The working example
NOTE: there is more up to date link to $state.go definition, but the deprecated one is a bit more clear to me
这篇关于动态设置的值UI的SREF Angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
