각도 UI 라우터를 사용하여 보기를 ng-hide 및 ng-show하려면 어떻게 해야 합니까?

각도 UI 라우터를 사용하여 보기를 ng-hide 및 ng-show하려면 어떻게 해야 합니까?

응용 프로그램에 사용자 목록을 보여주는 테이블과 같은 목록 페이지가 있다고 가정합니다.테이블의 각 행에는 "Edit(편집)"이라는 버튼이 있으며, 이 버튼을 클릭하면 브라우저 오른쪽에 오른쪽 패널과 함께 해당 사용자의 콘텐츠를 편집할 수 있는 양식이 나타납니다.양식이 저장되거나 닫히면 오른쪽 패널이 사라집니다.

편집 상태가 시작 및 종료될 때 Angular UI Router가 오른쪽 패널을 자동으로 표시하거나 숨기려면 어떻게 해야 합니까?기본적으로 템플릿은 추가 및 제거되지만 컨테이너 자체는 화면에 계속 표시됩니다.

UI Router용 데모 어플리케이션에서는 html 레이아웃에 모든 자스테이트에 빈 영역이 할당되어 있었습니다만, 제가 빌드하고 있는 어플리케이션에서는 패널을 사용하지 않을 경우 패널을 숨기고, 상태 입력 및 종료 시에 화면 전체를 슬라이드시켜 넣고 싶습니다.그러기 위해서는 ng-show와 ng-hide를 활용해야 할 것 같아요.UI 라우터를 사용하여 이 문제를 해결하려면 어떻게 해야 합니까?

감사합니다!

Angular의 UI 라우터는 중첩된 보기를 전환하기 위한 깨끗한 방법을 제공합니다.

먼저 가상의 "리스트 페이지" 컨트롤러에 $state를 삽입합니다.그런 다음 로컬 $scope에 노출합니다.

.controller('ListPageCtrl', function($scope, $state) {
    $scope.$state = $state;
})

주입한 $state 변수는 "포함" 방식이 좋습니다.$state.disc()는 문자열을 인수로 사용하여 해당 문자열을 현재 상태 이름과 대조합니다.상태 이름이 문자열과 일치하면 true를 반환하고 일치하지 않으면 false를 반환합니다.이를 통해 ng-show 또는 ng-hide와 함께 사용할 수 있습니다.

대신 ui-router의 $state.includes()를 egervari와 같은 템플릿과 함께 사용합니다.

<div id="rightView" ng-show="$state.includes('list.edit')">
    <div ui-view="edit" autoscroll="false"></div>
</div> 

includes 메서드로 전환하는 것 외에 ui-view 속성에 고유한 이름도 추가했습니다.두 개 이상의 뷰가 있으면 뷰의 이름을 붙이고 싶을 것입니다.이를 통해 템플릿 및 로직에서 이들을 쉽게 추적할 수 있습니다.

보기에 이름을 추가합니다.1을 2로 변경:

// 1
.state('list.edit', {
    url: 'list/edit/:id',
    templateUrl: 'template/edit.html',
    controller: 'ListPageEditCtrl'
})

// 2
.state('list.edit', {
    url: 'list/edit/:id',
    views: {
        'edit': { // this is the unique name you can reference later
            templateUrl: 'template/edit.html',
            controller: 'ListPageEditCtrl'
        }
    }
});

제가 생각해낸 최고의 해결책은 다음과 같습니다.

<div id="rightView" ng-show="$state.current.name === 'adminCompanies.list.edit'">
    <div ui-view autoscroll="false"></div>
</div>

어떤 방법으로든 이 문제를 해결하려면 각진 앱의 .run 섹션에서 다음과 같이 선언해야 합니다.

angular.module('yourApp', ['ui.router'])

    .run(
        ['$rootScope', '$state', '$stateParams',
            function ($rootScope, $state, $stateParams){                    
                $rootScope.$state = $state;
                $rootScope.$stateParams = $stateParams;
            }
            ]
    )

그렇지 않으면 내부 템플릿에서 $state 또는 $stateParams 중 어느 것도 액세스할 수 없습니다.키보드와 머리를 부딪친 직후에 UI 라우터 문서를 읽고 샘플 앱의 코드를 확인했습니다.이것이 동작하지 않았기 때문입니다.

querystring : querystring URL 을 ./stuff/1?edit ★★★★★★★★★★★★★★★★★」/stuff/1의 that의 /stuff/1?view

하면 .reloadOnSearch=false를 새로고침하지 않도록 Angular Angular에게 JS:

http://docs.angularjs.org/api/ngRoute.$routeProvider

controller 모드상태 모드)를 view ★★★★★★★★★★★★★★★★★」edit를 사용하여 를 참조해 주세요.$routeParams편집 클릭 이벤트를 포착하여 모델을 바에 전달하고 그에 따라 표시 여부를 전환합니다.

다음 링크를 참조하십시오.

AngularJS에서 컨트롤러를 새로고침하지 않고 경로를 변경할 수 있습니까?

보기를 다시 렌더링하지 않고 각도 JS에서 URL 업데이트

언급URL : https://stackoverflow.com/questions/21696104/how-to-ng-hide-and-ng-show-views-using-angular-ui-router