[javascript] AngularJS : 컨트롤러 기능에서 뷰를 어떻게 전환합니까?

JAVASCRIPT / 글쓴이

AngularJS 의 ng-click 기능 을 사용하여 보기를 전환 하려고합니다 . 아래 코드를 사용하여 어떻게하면됩니까?

index.html

 <div ng-controller="Cntrl">
        <div ng-click="someFunction()">
            click me
        <div>
    <div>

controller.js

  function Cntrl ($scope) {
        $scope.someFunction = function(){
            //code to change view?
        }
    }

답변

다른보기를 전환하기 위해 index.html 파일에서 window.location ($ location 서비스 사용)을 직접 변경할 수 있습니다.

<div ng-controller="Cntrl">
        <div ng-click="changeView('edit')">
            edit
        </div>
        <div ng-click="changeView('preview')">
            preview
        </div>
</div>

Controller.js

function Cntrl ($scope,$location) {
        $scope.changeView = function(view){
            $location.path(view); // path not hash
        }
    }

https://github.com/angular/angular-seed/blob/master/app/app.js 와 같이 위치에 따라 라우터가 다른 부분으로 전환되도록 구성하십시오 . 이것은 ng-view를 사용하는 것뿐만 아니라 역사의 이점을 가질 것입니다.

또는 ng-include를 다른 부분과 함께 사용한 다음 여기에 표시된대로 ng-switch를 사용하십시오 ( https://github.com/ganarajpr/Angular-UI-Components/blob/master/index.html )

답변

제공된 답변은 절대적으로 정확하지만 좀 더 역동적으로 수행하려는 향후 방문자를 위해 확장하고 싶었습니다.

보기에서- 

<div ng-repeat="person in persons">
    <div ng-click="changeView(person)">
        Go to edit
    <div>
<div>

컨트롤러에서- 

$scope.changeView = function(person){
    var earl = '/editperson/' + person.id;
    $location.path(earl);
}

수락 된 답변과 동일한 기본 개념으로 약간의 동적 내용을 추가하여 조금 향상시킵니다. 수락 된 답변이 이것을 추가하고 싶다면 내 답변을 삭제합니다.

답변

예제가 작동합니다.

내 문서 모양은 다음과 같습니다.

<html>
<head>
    <link rel="stylesheet" href="css/main.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-resource.min.js"></script>
    <script src="js/app.js"></script>
    <script src="controllers/ctrls.js"></script>
</head>
<body ng-app="app">
    <div id="contnr">
        <ng-view></ng-view>
    </div>
</body>
</html>

내 부분은 다음과 같습니다. 

<div id="welcome" ng-controller="Index">
    <b>Welcome! Please Login!</b>
    <form ng-submit="auth()">
        <input class="input login username" type="text" placeholder="username" /><br>
        <input class="input login password" type="password" placeholder="password" /><br>
        <input class="input login submit" type="submit" placeholder="login!" />
    </form>
</div>

내 Ctrl의 모양은 다음과 같습니다.

app.controller('Index', function($scope, $routeParams, $location){
    $scope.auth = function(){
        $location.url('/map');
    };
});

응용 프로그램은 내 모듈입니다.

var app = angular.module('app', ['ngResource']).config(function($routeProvider)...

이것이 도움이 되길 바랍니다.

답변

이 질문에 대한 이전의 모든 답변에 사용 된 방법은 필요하지 않은 URL 변경을 제안하며 독자는 대체 솔루션을 알고 있어야한다고 생각합니다. ui-router와 $ stateProvider를 사용하여 상태 값을보기의 html 파일을 가리키는 templateUrl과 연결합니다. 그런 다음 컨트롤러에 $ state를 주입하고 $ state.go ( ‘state-value’)를 호출하여 뷰를 업데이트하면됩니다.

각도 경로와 각도 UI 라우터의 차이점은 무엇입니까?

답변

이를위한 두 가지 방법이 있습니다.

ui-router 또는를 사용하는 경우 다음과 $stateProvider같이하십시오.

$state.go('stateName'); //remember to add $state service in the controller

각도 라우터 또는를 사용하는 경우 다음과 $routeProvider같이하십시오.

$location.path('routeName'); //similarily include $location service in your controller

답변

기본 라우팅 (# / ViewName) 환경을 완전히 개선하지 않고도 Cody의 팁을 약간 수정하여 제대로 작동 할 수있었습니다.

컨트롤러

.controller('GeneralCtrl', ['$route', '$routeParams', '$location',
        function($route, $routeParams, $location) {
            ...
            this.goToView = function(viewName){
                $location.url('/' + viewName);
            }
        }]
    );

보기

...
<li ng-click="general.goToView('Home')">HOME</li>
...

이 솔루션을 사용하게 된 것은 Kendo Mobile UI 위젯을 각도 환경에 통합하려고 시도했을 때 컨트롤러의 컨텍스트를 잃어 버렸고 일반 앵커 태그의 동작도 하이재킹되었습니다. Kendo 위젯 내에서 컨텍스트를 다시 설정하고 탐색하는 방법을 사용해야했습니다 …이 작동했습니다.

이전 게시물에 감사드립니다!

답변

Firstly you have to create state in app.js as below

.state('login', {
      url: '/',
      templateUrl: 'views/login.html',
      controller: 'LoginCtrl'
    })

and use below code in controller

 $location.path('login');

희망이 당신을 도울 것입니다