AngularJS ng-click, чтобы перейти на другую страницу (с Ionic framework)

В идеале, когда я нажимаю на кнопку (которая находится на панели навигации Ionic наверху), она должна выводить меня на другую страницу. Однако его не работает. После нажатия кнопки панели навигации все исчезает.

Когда я использовал фиктивные коды, он работает; появится предупреждение. Но когда я меняю его на фактический код, он не работает.

У меня есть чувство, что неправильно с кодами контроллера и как ссылается URL или представление. Но тестирование с помощью href и ui-sref также ничего не дает. Google Devt Tools (JS console) и Batarang также ничего не показывают.

Может ли кто-нибудь показать мне, пожалуйста?


dummy html code

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

Ответы

Ответ 1

Основываясь на комментариях, и из-за того, что @Thinkerer (OP-original poster) создал плункер для этого случая, я решил добавить еще один ответ с более подробной информацией.

Первое и важное изменение:

// 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... остальное было бы похоже

Ответ 2

Использовать <a> с помощью href вместо <button> решает мою проблему.

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

Ответ 3

Можно подумать, что вы должны изменить вызов $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\]):

в

Строковое абсолютное имя состояния или путь относительного состояния

Имя состояния, которое будет перенесено в или относительный путь состояния. Если путь начинается с ^ или. то оно относительное, в противном случае оно является абсолютным.

Некоторые примеры:

$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.

Ответ 4

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>

Ответ 5

Если вы просто хотите перейти на другую страницу, то вам может понадобиться ссылка, которая выглядит как кнопка с href следующим образом:

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

Надеюсь, что это поможет.