AngularJS ng-click 转到另一个页面（使用 Ionic 框架）

Posted 2023-03-05

【中文标题】AngularJS ng-click 转到另一个页面（使用 Ionic 框架）

【英文标题】：AngularJS ng-click to go to another page (with Ionic framework)

【发布时间】：2014-10-17 07:52:48

【问题描述】：

理想情况下，当我单击按钮（位于顶部的 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');

【问题讨论】：

您是否要重新加载整个页面？还是直接导航到那个标签？

该应用在顶部和底部都有一个导航栏。底部栏由状态“选项卡”表示。单击时，它应该导航到新页面，而导航栏和底部栏保持不变。

如果您可以提供给我们codepen 链接，那么我们会更容易为您提供帮助。

只是为了确定，你检查我的答案了吗？您的问题来自 ui-router，它是 ionic 框架的一部分。必须正确调用 $state.go - 使用州名，而不是网址...希望这会有所帮助；）

@RadimKöhler 我尝试了 $state.go 和 $window 方法，但都有一个 Cannot GET /tab/newpost 错误（当 html 有一个 ng-click=create() 而不是 ng-click （“tab.newpost”）我猜这意味着它有点工作。如果使用 $state.go，我不知道如何使它工作。Codepen 在这里工作很差，因为我有各种与数据库和其他项目相关的代码我无法插入。

【参考方案1】：

基于 cmets，并且由于 @Thinkerer （OP - 原始海报）为此案例创建了一个 plunker，我决定附加另一个包含更多详细信息的答案。

这是由@Thinkerer创建的plunker 这是它的updated and working version

第一个也是重要的变化：

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

我们需要他们的连接网址'/tab' + '/posts'。这就是我们想要用作 otherwise

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

正如我在之前的回答和 cmets 中已经说过的那样 ... $state.go() 是使用ionic 或ui-router 的唯一正确方法

检查所有here 最后一点 - 我只在 tab.posts...tab.newpost... 之间运行导航... 其余部分类似

【讨论】：

非常感谢！事实上，按照您的更改并将 tab.posts 和 tab.newpost 都放在相同的视图上，整个事情就可以工作了！你能解释一下为什么吗？另外我应该在哪里插入 更改？

此解决方案是众多解决方案之一。如果 new 应该replace posts，我们可以像以前那样做。但是我们也可以创建两个具有不同视图名称/目标的区域（兄弟视图）。或者我们可以将 new 移动到 posts 下，然后假设列表顶部可能是我们创建新的区域......同时仍在帖子上（@ 987654340@)...等等。我强烈建议去这里：***.com/a/20581135/1679310 并访问我提到的所有链接，主要是 state.js。请...这将帮助您了解ui-router 的真正力量。享受它;）

过渡有效，但问题很简单。我将提交按钮更改为 ng-click="submitPost()"。单击提交时，它会将我带到我的登录页面，但新的帖子条目已完成。知道为什么吗？我认为它是 url 路由器，否则。有什么办法可以说，如果登录，然后在提交时，转到帖子页面？

如果你想在提交后进入状态tab.view，你必须这样称呼它$state.go('tab.view', postId: postId)...就是这样。但是，请慢点。请阅读我的链接..这将有所帮助。还有这个：***.com/a/21097886/1679310

【参考方案2】：

使用 <a> 和 href 而不是 <button> 可以解决我的问题。

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

【讨论】：

正是我想要的形式，谢谢。对于任何想知道<button> 和<a> 的人来说，只要您使用离子类，它们看起来就会一样。

【参考方案3】：

一个认为你应该改变的是电话$state.go()。如此处所述：

$state.go(to [, toParams] [, options])

传递的参数应该是州名

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

【参考方案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>

【讨论】：

在哪里以及如何插入代码？我是否也必须为 $window 注入依赖项？

html 会怎样？应该还是 ng-click="create('/tab/newpost')" 吗？还是一个href？

这取决于您希望它是变量还是固定。

对不起，我对此很陌生。你能花点时间给我看两个不同的版本吗？无需详细解释，我可以先尝试阅读理解

这是否意味着控制器的变量代码...对于 url 我只需键入 url 或任何其他词？或者它是否意味着我希望导航到的实际网址？

【参考方案5】：

如果您只是想转到另一个页面，那么您可能需要一个看起来像带有 href 的按钮的链接：

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

希望这会有所帮助。