AngularJs ng클릭으로 다른 페이지로 이동(Ionic 프레임워크 사용)

AngularJs ng클릭으로 다른 페이지로 이동(Ionic 프레임워크 사용)

이상적으로는 버튼(상단의 Ionic 네비게이션바에 있음)을 클릭하면 다른 페이지로 이동합니다.하지만 작동하지 않는다.클릭하면 탐색 모음 버튼이 모두 사라집니다.

더미 코드를 사용하면 동작합니다.경보가 표시됩니다.그러나 실제 코드로 바꾸면 동작하지 않습니다.

컨트롤러 코드와 URL 또는 뷰가 어떻게 참조되는지 뭔가 잘못된 느낌이 듭니다.그러나 href 및 ui-sref를 사용한 테스트에서도 아무것도 얻을 수 없습니다.Google Devt Tools(JS 콘솔)와 Batarang도 아무것도 표시되지 않습니다.

누가 길 좀 가르쳐 주시겠어요?

더미 HTML 코드

<button class="button button-icon ion-compose" ng-click="create()"></button>

js 파일의 더미 컨트롤러 코드

$scope.create = function() {
  alert("working");
};

실제 html 코드 (4가지 버전 모두 사용)

<button class="button button-icon ion-compose" ng-click="create('tab.newpost')"></button>
<button class="button button-icon ion-compose" ui-sref="tab.newpost"></button>
<button class="button button-icon ion-compose" href="/tab/newpost"></button>
<button class="button button-icon ion-compose" ng-click="location.path('/tab/newpost')"></button>

컨트롤러 파일(Post 및 Auth 의존관계는 정상적으로 동작합니다)..go()와 function()에 URL을 입력하려고 하면 앱이 실패합니다.

app.controller('NavCtrl', function ($scope, $location, $state, Post, Auth) {
    $scope.post = {url: 'http://', title: ''};

    $scope.create = function() {
      /* $location.path('/tab/newpost'); */   /* this variant doesnt work */
      $state.go("/tab/newpost"); 
    };
  });

상태 js 파일의 추출

.state('tab.newpost', {
      url: '/newpost',
      views: {
        'tab-newpost':{
          templateUrl: 'templates/tab-newpost.html',
          controller: 'NewCtrl'
        }
      }
    });

$urlRouterProvider.otherwise('/auth/login');

@Thinker(OP-original Poster)가 이 건에 대해 플런커를 만들어 준 것을 바탕으로, 보다 상세한 답변을 추가하기로 했습니다.

• @Thinkerer에 의해 작성된 플런커입니다.
• 최신 버전 및 작동 버전입니다.

첫 번째 중요한 변경:

// instead of this
$urlRouterProvider.otherwise('/tab/post');

// we have to use this
$urlRouterProvider.otherwise('/tab/posts');

상태 정의는 다음과 같습니다.

.state('tab', {
  url: "/tab",
  abstract: true,
  templateUrl: 'tabs.html'
})

.state('tab.posts', {
  url: '/posts',
  views: {
    'tab-posts': {
      templateUrl: 'tab-posts.html',
      controller: 'PostsCtrl'
    }
  }
})

그리고 우리는 그들의 연결된 URL이 필요합니다.'/tab'+'/posts'이 URL을 다른 방법으로 사용합니다.

나머지 지원서는 우리가 필요로 하는 결과에 매우 근접해 있습니다.
예를 들어 다음과 같이 변경된 콘텐츠만 동일한 뷰 타겟재에 배치해야 합니다.

.state('tab.newpost', {
  url: '/newpost',
  views: {
    // 'tab-newpost': {
    'tab-posts': {
      templateUrl: 'tab-newpost.html',
      controller: 'NavCtrl'
    }
  }

왜냐면.state('tab.newpost'를 대체하는 것이 될 것입니다..state('tab.posts'같은 앵커에 배치해야 합니다.

<ion-nav-view name="tab-posts"></ion-nav-view>  

마지막으로 컨트롤러의 몇 가지 조정:

$scope.create = function() {
    $state.go('tab.newpost');
};
$scope.close = function() { 
     $state.go('tab.posts'); 
};

아까 답변과 댓글에서 말씀드렸듯이...올바른 사용 방법은 이뿐입니다.ionic또는ui-router

여기서 모든 것을 확인합니다.최종 메모 - ...간의 네비게이션만 실행했습니다.나머지 부분은 비슷합니다.

사용하다<a>a 대신 href를 사용하여<button>제 문제를 해결합니다.

<ion-nav-buttons side="secondary">
  <a class="button icon-right ion-plus-round" href="#/app/gosomewhere"></a>
</ion-nav-buttons>

당신이 바꿔야 한다고 생각하는 것 중 하나는 전화입니다.$state.go(). 여기에 기재된 바와 같이:

• $state.go([, toParams] [, 옵션]으로)

전달된 매개 변수는 상태 이름이어야 합니다.

$scope.create = function() {
  // instead of this
  //$state.go("/tab/newpost"); 

  // we should use this
  $state.go("tab.newpost"); 
};

일부에서는 doc(의 첫 번째 파라미터)를 인용합니다.[$state.go(to \[, toParams\] \[, options\]

로.

문자열 절대 상태 이름 또는 상대 상태 경로

이행되는 상태의 이름 또는 상대 상태 경로.경로가 ^ 또는 로 시작하는 경우 상대 경로이고, 그렇지 않은 경우 절대 경로입니다.

몇 가지 예:

$state.go('contact.detail') will go to the 'contact.detail' state
$state.go('^') will go to a parent state.
$state.go('^.sibling') will go to a sibling state.
$state.go('.child.grandchild') will go to a grandchild state.

app.controller('NavCtrl', function ($scope, $location, $state, $window, Post, Auth) {
    $scope.post = {url: 'http://', title: ''};

    $scope.createVariable = function(url) {
      $window.location.href = url;
    };
    $scope.createFixed = function() {
      $window.location.href = '/tab/newpost';
    };
});

HTML

<button class="button button-icon ion-compose" ng-click="createFixed()"></button>
<button class="button button-icon ion-compose" ng-click="createVariable('/tab/newpost')"></button>

단순히 다른 페이지로 이동하는 경우 다음과 같은 href를 가진 버튼과 같은 링크가 필요할 수 있습니다.

<a href="/#/somepage.html" class="button">Back to Listings</a>

이게 도움이 됐으면 좋겠다.

언급URL : https://stackoverflow.com/questions/25464306/angularjs-ng-click-to-go-to-another-page-with-ionic-framework