ui-sref Angularjs 값을 동적으로 설정합니다.

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 값을 변경할 수 있습니까?아니면 아래와 같이 선택할 때마다 디렉티브를 사용하여 요소 전체를 다시 작성해야 합니까?(완전성을 위해 이것을 보여주는 것 뿐)

옵션 디렉티브를 선택합니다(이 디렉티브는 링크 디렉티브를 생성합니다).

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>

결국 가능하겠군

ui-router 작가 중 한 명이 GitHub에 올린 브레드 크럼을 보고 다음과 같은 시도를 하게 되었습니다.

<a ng-href="{{getLinkUrl()}}">Dynamic Link</a>

다음으로 컨트롤러에서 다음을 수행합니다.

$scope.getLinkUrl = function(){
  return $state.href('state-name', {someParam: $scope.someValue});
};

이것은, 스코프의 값을 바꾸는 것 등, 매우 효과가 있는 것으로 나타났습니다.state-name' 문자열의 상수 참조를 범위 값으로 할 수도 있습니다.이 경우 뷰의 href도 갱신됩니다:-).

작동하는 플런커가 있습니다.가장 쉬운 방법은 다음 항목을 조합하여 사용하는 것 같습니다.

• $state.href() (여기 doc) 및
• ng-href (여기 doc)

이러한 조합은 다음과 같이 사용할 수 있습니다.

<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" />

동작 확인은 이쪽에서

오리지널:

우리가 필요로 하는 것을 어떻게 달성할 것인가 하는 실천적인 예가 있다.단, 다이내믹한 기능에서는ui-sref.

여기서 확인할 수 있듯이 https://github.com/angular-ui/ui-router/issues/395

Q: [A] - - 、 ui - sref 、 q q 、 q q 、 - q?
답입니니다다

'다르다'의 다른 할 수 있어요.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>

작업 예

메모: $state.go 정의에 대한 최신 링크가 더 있지만 권장되지 않는 링크가 조금 더 명확합니다.

이번 호 #2944를 봐주세요.

ui-sref안 요.사용할 수 있습니다.ui-state ★★★★★★★★★★★★★★★★★」ui-state-params변수를 전달합니다.

  <a data-ui-state="selectedState.state" data-ui-state-params="{'myParam':aMyParam}">
       Link to page {{selectedState.name}} with myParam = {{aMyParam}}
  </a>

티켓에 포함된 빠른 데모도 있습니다.

이 방법으로 실장할 수 있었습니다(단, $scope가 아닌 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

해 본 , 는 '', '하다', '하다', '하다', '하다', '하다', '하다'에 있습니다.angular.ui.router

문제는.router가 ui.router로 되어 합니다.update는 Method에서 .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에는 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);
            });
        }
    };
}

영원히 대답하게 되었습니다:)

다행히 원하는 것을 얻기 위해 ng-click 버튼을 사용하거나 ng-href 내의 기능을 사용할 필요가 없습니다.대신,

만들 수 요.$scope하고 "var"를 합니다.ui-sref 해서 쓰도록 .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>

그건 나한테 딱 맞아.

은 을 입니다.uiRouter's $state.go('stateName', {params})버튼에ng-click하지 않으면 합니다.옵션이 선택되지 않은 경우 버튼을 비활성화합니다.

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&param2'
    templateUrl: 'wizard.html',
    controller: 'Controller as ctrl'
});

<a ng-click="{{getLinkUrl({someParam: someValue})}}">Dynamic Link</a>

$scope.getLinkUrl = function(value){
  $state.go('My.State',{someParam:value});

}

개체를 반환합니다.

이건 나한테 딱 맞는 일이야

컨트롤러 내

$scope.createState = 'stateName';

시야에 있는

ui-sref="{{ createState }}"

ui-sref를 사용하여 여러 동적 매개 변수를 관리하는 경우 다음 솔루션을 참조하십시오.

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;
  };
}

state Provider : ('myState')

 $stateProvider
          .state('myState', {
            url: '/name/subname?param1&param2&param3',
            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에서 ui-sref의 $stateParams만 동적으로 설정하는 경우.주의: 검사 요소에서는 "buy({myPair)"로 표시됩니다.인덱스:$index}" 단, $index는 이 상태로 가져옵니다.

저는 이 솔루션이 가장 적합하다고 생각했습니다.

.state('history', {
    url: 'home',
    controller: 'homeCtrl',
    templateUrl: "home.html"
  })
  .state('settings', {
    url: "/settings",
    controller: 'settingsCtrl',
    templateUrl: 'settings.html'
  })

<button ui-sref="{{$ctrl.newProductLink()}}"</button>

ctrl.newProductLink = () => a > b ? 'home' : 'settings';

또는 다음과 같은 것이 있습니다.

<a ui-sref="{{ condition ? 'stateA' : 'stateB'}}">
  Link
</a>

언급URL : https://stackoverflow.com/questions/24349731/dynamically-set-the-value-of-ui-sref-angularjs