Question

这是codepen示例。当我点击“科学事实”按钮时，它将被定向到事实页面。

在事实页面中，我必须手动输入view-title="facts"，因此标题可以显示标题“事实”。

是否可以自动将按钮文本（科学事实）作为视图标题？

<html ng-app="ionicApp">

<title>Tabs Example</title>

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

<ion-nav-bar class="bar-positive">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view></ion-nav-view>


<script id="templates/tabs.html" type="text/ng-template">
  <ion-tabs class="tabs-icon-top tabs-positive">

    <ion-tab title="Home" icon="ion-home" href="#/tab/home">
      <ion-nav-view name="home-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
      <ion-nav-view name="about-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
      <ion-nav-view name="contact-tab"></ion-nav-view>
    </ion-tab>

  </ion-tabs>
</script>

<script id="templates/home.html" type="text/ng-template">
  <ion-view view-title="Home">
    <ion-content class="padding">
      <p>
        <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
      </p>
    </ion-content>
  </ion-view>
</script>

<script id="templates/facts.html" type="text/ng-template">
  <ion-view view-title="Facts">
    <ion-content class="padding">
      <p>Banging your head against a wall uses 150 calories an hour.</p>
      <p>Dogs have four toes on their hind feet, and five on their front feet.</p>
      <p>The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.</p>
      <p>A cockroach will live nine days without it's head, before it starves to death.</p>
      <p>Polar bears are left handed.</p>
      <p>
        <a class="button icon ion-home" href="#/tab/home"> Home</a>
        <a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">More Facts</a>
      </p>
    </ion-content>
  </ion-view>
</script>

<script id="templates/facts2.html" type="text/ng-template">
  <ion-view view-title="Also Factual">
    <ion-content class="padding">
      <p>111,111,111 x 111,111,111 = 12,345,678,987,654,321</p>
      <p>1 in every 4 Americans has appeared on T.V.</p>
      <p>11% of the world is left-handed.</p>
      <p>1 in 8 Americans has worked at a McDonalds restaurant.</p>
      <p>$283,200 is the absolute highest amount of money you can win on Jeopardy.</p>
      <p>101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don't die throughout the movie.</p>
      <p>
        <a class="button icon ion-home" href="#/tab/home"> Home</a>
        <a class="button icon ion-chevron-left" href="#/tab/facts"> Scientific Facts</a>
      </p>
    </ion-content>
  </ion-view>
</script>

<script id="templates/about.html" type="text/ng-template">
  <ion-view view-title="About">
    <ion-content class="padding">
      <h3>Create hybrid mobile apps with the web technologies you love.</h3>
      <p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
      <p>Built with Sass and optimized for AngularJS.</p>
      <p>
        <a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">Tabs Nav Stack</a>
      </p>
    </ion-content>
  </ion-view>
</script>

<script id="templates/nav-stack.html" type="text/ng-template">
  <ion-view view-title="Tab Nav Stack">
    <ion-content class="padding">
      <p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
    </ion-content>
  </ion-view>
</script>

<script id="templates/contact.html" type="text/ng-template">
  <ion-view title="Contact">
    <ion-content>
      <div class="list">
        <div class="item">
          @IonicFramework
        </div>
        <div class="item">
          @DriftyTeam
        </div>
      </div>
    </ion-content>
  </ion-view>
</script>

Answer 1

有两种方法可以实现这一目标：

1）最明显的一个是用角度的原型控制器继承完成的。您需要为tabs状态声明一个控制器。在此控制器的$scope范围内，您可以将按钮的标题和标题定义为范围变量e.x：

$scope.testTitle = 'Scientific Facts';

现在，由于每个其他控制器都继承自tabs控制器，因此testTitle属性也在继承范围内，可用于呈现标题。

更新了codepen：http://codepen.io/anon/pen/mJVOJJ

我不建议这样做，因为很难知道在哪个控制器中定义了哪些属性，这会让时间变得非常混乱。

2）您可以声明服务并在那里定义title属性。您可以将服务注入控制器以获取title属性。通过这种方式，您可以保持$scope清洁：

.factory('TitleService', function() {
  var titles = {
    t1:'foobar',
    t3:'baz',
    t4:'bar'
  };
  return titles;
});

Codepen：http://codepen.io/anon/pen/xGZRZM

Answer 2

我不太确定此请求背后的动机，但解决问题的一种可能方法是将所需的标题添加到重定向到“事实”页面的锚点的URL中，即：

 <a class="button icon icon-right ion-chevron-right" href="#/tab/facts?title=Scientific%20Facts">Scientific Facts</a>

如果您更改到页面的路径以了解该查询参数，则可以使用该页面控制器中的$ stateParams服务来检索该值，即：

 .state('tabs.facts', {
  url: "/facts?:title",
  views: {
    'home-tab': {
      templateUrl: "templates/facts.html"
    }
  }

注意网址“/ facts？：title” - “：title”现在成为$ stateParam服务将获取的参数。现在在你的控制器中你可以这样做：

.controller('FactController', function ($scope, $stateParams) {
  $scope.title = $stateParams.title;
});

现在，您可以通过{{title}}直接从“事实”视图中引用该标题。

这是一个更新的笔，显示这工作。 http://codepen.io/anon/pen/OVMbVX

似乎需要付出很多努力才能传递标题; - ）

更好的方法是创建一个“页面名称”服务，它将所有页面名称放在一个位置，然后从两个控制器中获取服务;在主控制器上，您可以使用页面名称来设置锚文本，而在另一个页面上使用它来设置页面标题。有很多方法可以给这只猫上皮。

离子链接到视图，获取视图标题的链接标题

2 个答案: