动态设置ui-sref Angularjs的值
动态设置ui-sref Angularjs的值
提问于 2014-06-22 17:03:20
我搜索过类似的问题，但出现的问题似乎略有不同。我正在尝试动态更改链接的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>Stack Overflow用户
发布于 2016-07-27 23:35:47
在尝试了各种解决方案之后，我在angular.ui.router代码中发现了这个问题。
问题源于这样一个事实，即ui.router update方法是由ref.state触发的，这意味着在单击元素时不可能更新所使用的href的值。
这里有两个解决问题的方法：
自定义指令
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);
});
}
};
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24349731
复制相关文章
相似问题
腾讯云开发者
