web-dev-qa-db-ja.com

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の依存関係は正常に機能します）。 URLを.go（）とfunction（）の両方に配置しようとすると、アプリは失敗します。

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');
javascripthtmlangularjsionic-framework
47
Thinkerer

コメントに基づいて、@ Thinkerer（OP-元のポスター）がこのケースのプランカーを作成したという事実のために、私はより詳細な別の答えを追加することにしました。

最初の重要な変更：

// 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です

アプリケーションの残りの部分は、必要な結果に本当に近いです...
例えば。コンテンツを同じビューtargetgoodに配置する必要がありますが、これらは変更されただけです。

.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'); 
};

以前の回答とコメントですでに述べたように...$state.go()が唯一の正しい方法ですionicまたはui-routerの使用方法

すべてを確認してください ここ最後の注意-tab.posts... tab.newpost...間のナビゲーションだけを実行しました。残りは同様です

36
Radim Köhler

<a>の代わりにhrefで<button>を使用すると問題が解決します。

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

変更する必要があると思うのは、$state.go()の呼び出しです。ここで説明したように：

渡されるパラメーターは状態名である必要があります

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

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

Docからの引用（[$state.go(to \[, toParams\] \[, options\]の最初のパラメーターto）：

に

文字列の絶対状態名または相対状態パス

移行される状態の名前または相対状態パス。パスが^または。で始まる場合それは相対的であり、そうでなければ絶対的です。

いくつかの例：

$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.
8
Radim Köhler
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>
3
Giannis Paraskevopoulos

単に別のページに移動したい場合、必要なのは、次のようなhrefを持つボタンのようなリンクです。

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

お役に立てれば。

3
Kingsley Ijomah