javascript - Ng Click 在导航栏中不起作用

Question

我在导航栏中有一个简单的 ng-click，但它不起作用。我已将 html 模板放在指令中，但未出现警报。我的控制台中没有其他问题。我很困惑为什么这不起作用。

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

我的指令作为一个整体。

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("");
  }
}

笨蛋 here .

Answer 1

您只需要将 button 类添加到您的图像中。您可以添加 button-clear 以便不添加按钮边框。

<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

澄清一下，每个人在某种程度上都是正确的:

• icycool 是正确的，因为实际问题是 z-index。 ionic 按钮类添加了 z-index: 1。
• Krytic 指出，如果没有 ionic css 链接，它将起作用(因为元素然后只是默认为相对位置并且按钮不会被遮挡)。
• aorfevre 关于使用链接的建议之所以奏效，不是因为它是 anchor 标记，而是因为该链接应用了按钮类。