CODEWITHSUNDEEP
javascripthtmlangularjsionic-framework
thank_you
thank_you

Reputation: 11107

Ng Click Doesn't work in Nav Bar

I have a simple ng-click in the nav bar and it doesn't work. I've placed the html template inside of a directive but the alert does not appear. There are no other issues in my console. I'm stumped as to why this doesn't work.

<signed-in-header></signed-in-header>

My directive as a whole.

angular.module('CoolSite.user')

.directive('signedInHeader', signedInHeader)

function signedInHeader() {
  return {
    template: template,
    link: link,
    scope: { }
  }

  function link(scope, elem, attrs) {
    scope.alert = function() {console.log("ALERTED")}
  }

  function template() {
    return [
      '<ion-nav-bar class="bar-light" align-title="center">',
        '<ion-nav-buttons side="left">',
          '<img ng-click="alert(123)" height="30" src="/img/logo-full.png">',
        '</ion-nav-buttons>',

        '<ion-nav-buttons side="right">',
          '<div ui-sref="tab.cart">',
            '<i class="icon ion-ios-cart-outline"></i>',
            '<div id="cartCount" class="assertive">1</div>',
          '</div>',
        '</ion-nav-buttons>',
      '</ion-nav-bar>'
    ].join("");
  }
}

Plunker here.

Upvotes: 1

Views: 2701

Answers (6)

jme11
jme11

Reputation: 17374

You just need to add the button class to your image. You can add button-clear so that the button border is not added.

<img class="button button-clear" ng-click="alert(123)" src="https://cdn1.iconfinder.com/data/icons/hawcons/32/700015-icon-27-one-finger-click-32.png" />

Working Plunker

To clarify, everyone was correct on some level:

  • icycool was right in that the actual issue is the z-index. The ionic button class adds z-index: 1.
  • Krytic points out that without the ionic css linked it will work (because the elements then just default to relative position and the button isn't obscured).
  • aorfevre's suggestion to use a link worked not because it was an anchor tag, but because the link had the button class applied.

Upvotes: 4

Icycool
Icycool

Reputation: 7179

Some how the generated ionic code has it's title blocking its own button.

<ion-nav-bar id="signedInHeader" class="bar-light nav-bar-container" align-title="center" nav-bar-transition="ios">
    <ion-nav-buttons side="left" class="hide"></ion-nav-buttons>
    <ion-nav-buttons side="right" class="hide"></ion-nav-buttons>
    <div class="nav-bar-block" nav-bar="cached">
        ...
    </div>
    <div class="nav-bar-block" nav-bar="active">
        <ion-header-bar class="bar-light bar bar-header disable-user-behavior" align-title="center">
            <div class="buttons buttons-left header-item">
                <span class="left-buttons">
                    <div ng-click="alert(123)">click me</div>
                </span>
            </div>
            <div class="title title-center header-item"></div> <!-- this line -->
            <div class="buttons buttons-right header-item">
                <span class="right-buttons">
                    <div>
                        <i class="icon ion-ios-cart-outline"></i>
                        <div id="cartCount" class="assertive">1</div>
                    </div>
                </span>
            </div>
        </ion-header-bar>
    </div>
</ion-nav-bar>

The title is having a css in ionic.css

.bar .title {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 0;
  ...
}

In CSS rules position:absolute items will be placed on top of normal flow items.

There might be a way in ionic coding style that fixes this issue but I can't find it.

So I fixed it by raising the buttons and make it covers the title again

.bar .buttons-left {
  position: absolute;
  z-index: 1;
}

Note that after this fix the left buttons will cover the title if title text is long enough to go under it, or the title text is aligned left.

Upvotes: 0

malifa
malifa

Reputation: 8165

Ionics CSS comes with this rule:

img {
    -webkit-user-drag: none;
}

Removing this from ionic.css or setting it to auto should solve this.

Update:

this doesn't solve the issue for the OP. But using his plunkr, removing the ionic.css from the document fixes the issue. Just as a hint, the answer is somewhere out there ;)

Upvotes: 0

aorfevre
aorfevre

Reputation: 5064

I have slightly updated your case with a templateUrl which is, in my opinion, much more readable.

http://plnkr.co/edit/8CHdeRmDtG52PgvAbucG?p=preview Template here : 

<ion-nav-bar id="signedInHeader" class="bar-light" align-title="center">
    <ion-nav-buttons side="left">
      <a class="button button-icon button-clear " ng-click="test()">CLICK
    </a>
    </ion-nav-buttons>
</ion-nav-bar>

I have created a test function that is added to your directive link.

scope.test= function(){
  alert("TEST");
}

Upvotes: 1

Icycool
Icycool

Reputation: 7179

I think you can't specify a directive using id?

Angular doc says:

The restrict option is typically set to:
'A' - only matches attribute name
'E' - only matches element name
'C' - only matches class name

Maybe you can try adding it as an attribute?

<ion-nav-bar signed-in-header id="signedInHeader" class="bar-light" align-title="center">

Upvotes: 1

dave
dave

Reputation: 64657

What you have to remember is that ng-click will look for a function bound to the current $scope, so if you do

ng-click="alert(123)"

it is looking for a function $scope.alert and will not find it. It does not look in the window object to find it.

Upvotes: 0

Related Questions