Question

对于离子而言，我是一个新手，我一直试图在离子标题栏内动态更改H1标签而没有任何成功。这是我需要使用的HTML的一部分：

<ion-header-bar class="cabecera bar-light">
   <div class="buttons buttons-left header-item"><span class="left-buttons">
      <button class="button button-icon button-clear ion-navicon texto-azul" menu-toggle="left">
      </button>
        </span></div>
        <img src="img/img-logo.jpg" alt="logo-banco" class="cabecera__logo"/>
        <h1 class="title">{Dynamic h1 here}</h1>
      <i class="ion-help-circled"></i>
</ion-header-bar>

这是我的app.js

.controller('AppController', function($scope) {

console.log("Not initialize");
google.maps.event.addDomListener(window, 'load', initialize());

function initialize() {
  console.log("Initialize");
  var mapOptions = {
    // the Teide ;-)
    center: {lat: 41.391134, lng: 2.155260},
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControlOptions: {
      mapTypeIds: []
    },
    panControl: false,
    streetViewControl: false,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    }
  };

  var map = new google.maps.Map(document.getElementById("mapa"), mapOptions);
  $scope.map = map;
}
})

.config(function($stateProvider, $urlRouterProvider) {

 $stateProvider

.state('login', {
  templateUrl: 'login.html',
  name: 'login',
  controller:'MainCtrl'  
})

.state('menu', {
  templateUrl: 'menu.html',
  name:'menu',
  controller:'MainCtrl'
})

.state('detalle-partes', {
  templateUrl: 'detalle-partes.html',
  name:'detalle-partes',
  controller:'MainCtrl'
})

})

.controller('MainCtrl', function($scope, $state) {
    "use strict";

/* Items for left side menu. */
$scope.menuItems = [
    {id: 'login', name: 'Login'},
    {id: 'menu', name: 'Menu'},
    {id: 'detalle-partes', name: 'Partes: Detalle'},
    {id: 'seguimiento-partes', name: 'Partes: Seguimient'},
    {id: 'grua', name: 'Grua'},
    {id: 'registre', name: 'Registre'},
    {id: 'renting-robo', name: 'Renting: Robo'},
    {id: 'taller', name: 'Taller'},
    {id: 'taller-mecanica', name: 'Taller: Mecánica'}
];

$scope.enterState = function(stateID) {
      console.log(stateID);
        $state.transitionTo(stateID);
};

$scope.$state = $state;
})

我需要做的是用模板标题更改H1，任何帮助都会非常感激。

Answer 1

从控制器中将标题添加到范围。

然后将它传递给视图，就像你在棱角分明一样。

在控制器中

$scope.title = 'MyTitle';

在视图中

<h1>{{title}}</h>

请务必将正确的控制器添加到您的状态或视图中。您正在将MainCtrl添加到两个状态。所以如果你添加了

 $scope.title = "MyTitle";

到AppController，当你命名它时，你需要将该控制器添加到你想要数据去的视图。

在离子框架上动态更改<h2>

1 个答案: