source

AngularJS UI-Router는 뷰 내에서 현재 상태를 가져옵니다.

itover 2023. 2. 11. 09:12
반응형

AngularJS UI-Router는 뷰 내에서 현재 상태를 가져옵니다.

UI 라우터 매뉴얼에서 다음 상태를 고려합니다.

.state('state1', {
  url: '/state1',
  templateUrl: 'partials/state1.html'
  controller: 'State1Ctrl'
})
.state('state1.list', {
  url: '/list',
  templateUrl: 'partials/state1.list.html',
})

상태 "state1"의 "partials/state1.html" 컨트롤러:

.controller('State1Ctrl', function () {

});

컨트롤러 내부 또는 템플릿 내에서 컨트롤러/템플릿이 어떤 상태에 관련되어 있는지 판단하는 기능이 내장되어 있습니까?

예를 들어 다음과 같습니다.

.controller('State1Ctrl', function ($state) {
  console.log($state.this); // state1
});

또, 빌트인 솔루션이 없는 경우, $state 또는 $stateParams를 어떻게 「장식」하고, 이 정보를 포함할 수 있습니까?

제가 생각해낸 유일한 해결책은 $state.get()을 사용하여 컨트롤러 또는 템플릿 값이 있는 상태를 찾는 것입니다.하지만 이건 정말 엉망진창인 것 같아.

다음과 같이 현재 상태 configatin 개체에 액세스할 수 있습니다.

$state.current

자세한 내용은 $state 문서를 참조하십시오.

다음과 같이 할 수 있습니다.

$state.current.name //Return the name of current state

어디서도 이 문서를 찾을 수 없어서 소스코드를 찾아봤어요.

$uiView라는 이름의 데이터 필드가 ui-view 요소에 연결되어 있으며, 여기에는 보기 이름과 관련 상태가 포함됩니다.다음과 같은 상태를 얻을 수 있습니다.

elem.closest('[ui-view]').data('$uiView').state

또는 심지어

elem.inheritedData('$uiView').state

정의되어 있는 것을 확인할 수 있습니다.currentstate를 사용하여 다음 를 확인합니다.

state1
{
  "url": "/state1",
  "template": "<div>state1 <pre>{{current | json }}</pre><div ui-view=\"\"></div> </div>",
  "controller": "State1Ctrl",
  "name": "state1"
}
list
{
  "url": "/list",
  "template": "<div>list <pre>{{current | json }}</pre></div>",
  "controller": "State1Ctrl",
  "name": "state1.list"
}

컨트롤러:

.controller('State1Ctrl', function($scope, $state) {

  $scope.current = $state.current

});

그것을 여기에서 확인하다

EXTEND: 위의 예에서는 항상 현재 상태가 반환됩니다.즉, 3개의 상태의 계층이 존재하고 마지막 상태에 액세스 하고 있는 경우('state1.list.detail') 직접:

<a ui-sref="state1.list.detail({detailId:1})">....

각 컨트롤러에는 동일한 상태 $state("state1.list.detail")가 제공됩니다.

이유는? 이 상태에는 충분한 정보가 있기 때문에 필요한 모든 뷰(계층적으로 중첩됨)와 컨트롤러가 있습니다.우리는 모든 것을 관찰할 수 있다.

$state.$current // not .current

여기서 간단히 설명하겠습니다.

또한 사용자는 사용자 지정 장식기를 첨부할 수 있으며, 이 경우 주 내부 정의 내에 새 특성이 생성됩니다.현재 내부 상태(즉, 내부 상태)에 액세스하는 것 외에 이에 대한 명확한 사용 사례는 없지만, 추가 메타 프로그래밍 기능을 도입함에 따라 이 기능이 더욱 중요해질 것으로 예상합니다.

단, 현재 컨트롤러에서 정보를 얻는 방법은 없습니다. instance,어느것에게$state그건 내꺼야!심지어 어떤 반복도, 몇 가지 검색도$state.get('stateName')을 사용하다 왜냐하면 단순히 그런 식으로 유지되는 관계가 없기 때문이죠. '''1'''Class 의미로 할 수 .Instances이제 명확해졌으면 좋겠다

이것은 현재 상태 이름 $state.current.name을 찾는 경우에 유용합니다.

같은 버전인지는 모르겠지만 0.3.1에서는 이를 사용하여 현재 상태를 얻을 수 있습니다.

$state.$current.name

그리고 검사를 수행하려면:

$state.is('contact.details.item');

문서: https://ui-router.github.io/ng1/docs/0.3.1/index.html # / api / ui . http.state . $state

코드로부터 「즉시 사용 가능한컨트롤러.상태는 다음과 같습니다.

.controller('State1Ctrl', function ($state) {
    console.log("Current State: ", $state.current.name);
});

현재 상태를 확인하려면

console.log("state", $state.current)

현재 상태 이름의 이름을 확인하려는 경우

console.log("statename", $state.current.name)

언급URL : https://stackoverflow.com/questions/25040304/angularjs-ui-router-get-the-current-state-from-within-a-view

반응형