비슷한 질문을 검색했지만 나온 질문이 약간 달라 보입니다. 링크의 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 옵션 지시문 (이 지시문은 링크 지시문을 생성 함)
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>