标题中的离子按钮无法响应ng-click

时间:2016-01-15 13:46:14

标签: javascript html angularjs ionic-framework

我确信这是一个简单的问题,但我一直在试图让它发挥作用。我的标题中有一个按钮,点击后我想触发一个打印的简单函数。我无法通过点击打印!

我将在下面粘贴HTML和JS。我知道控制器已正确连接到html视图。这是一个抽象的状态,因为我也有标签。我开始认为你不能使用控制器来抽象状态?我只想让标题显示在标签

上方

HTML:

 <ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="clicked()">Seach</button>
     <button class="button button-icon icon ion-ios-search-strong" ng-click="showFilterBar()">
    </button>
  </div>
  <h1 class="title">Title</h1>
  <div class="buttons">
    <button class="button" ng-click="clicked()" >Test</button>
  </div>
</ion-header-bar>

<!--

Create tabs with an icon and label, using the tabs-positive style.
Each tab's child <ion-nav-view> directive will have its own
navigation history that also transitions its views in and out.
-->

<ion-tabs class="tabs-striped tabs-top tabs-background-light tabs-color-positive">

  <!-- Dashboard Tab -->
  <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/home">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>

  <!-- Chats Tab -->
  <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
    <ion-nav-view name="tab-chats"></ion-nav-view>
  </ion-tab>


   <!-- Search Tab -->
  <ion-tab title="Search" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/search">
    <ion-nav-view name="tab-search"></ion-nav-view>
  </ion-tab>

  <!-- Account Tab -->
  <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/selfprofile">
    <ion-nav-view name="tab-selfprofile"></ion-nav-view>
  </ion-tab>


</ion-tabs>

使用Javascript:

   .controller('tabCtrl', ['$state', function($scope, $timeout, $ionicFilterBar) {
console.log("tab control is on");
    $scope.places = [{name:'New York'}, {name: 'London'}, {name: 'Milan'}, {name:'Paris'}];


$scope.clicked = function() {
  console.log("test")
};


$scope.showFilterBar = function () {
  console.log("search button pressed");
    var filterBarInstance = $ionicFilterBar.show({
      cancelText: "<i class='ion-ios-close-outline'></i>",
      items: $scope.places,
      update: function (filteredItems, filterText) {
        $scope.places = filteredItems;
      }
    });
  };



}])

只是显示这是一个抽象的状态:

  .state('tab', {
        url: '/tab',
        abstract: true,
        templateUrl: 'templates/tabsL1.html',
        controller: 'tabCtrl'
        })

提前感谢您的帮助。我尝试在一个页面中手动完成它,它似乎工作。我很困惑,为什么它在这种情况下不起作用,如果有解决方法。

0 个答案:

没有答案