Ng Click在导航栏中不起作用

Question

我在导航栏中进行了简单的ng单击，但是它不起作用。 我已将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("");
  }
}

在这里插一下 。

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" />

工作柱塞

为了澄清，每个人在某种程度上都是正确的：

• icycool是正确的，因为实际的问题是z-index。 离子按钮类添加z-index: 1 。
• Krytic指出，无需链接离子css，它将起作用（因为然后将元素默认设置为相对位置，并且按钮不会被遮盖）。
• aorfevre建议使用链接不是因为它是一个锚标签，而是因为链接应用了按钮类。

Answer 2

我认为您不能使用id指定指令？

角文档说：

限制选项通常设置为：
'A'-仅匹配属性名称
'E'-仅匹配元素名称
'C'-仅匹配类别名称

也许您可以尝试将其添加为属性？

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

Answer 3

我用templateUrl稍微更新了您的案例，我认为它更具可读性。

http://plnkr.co/edit/8CHdeRmDtG52PgvAbucG?p=预览模板在这里：

<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>

我创建了一个测试函数，该函数已添加到您的指令链接中。

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

Answer 4

您要记住的是， ng-click将查找绑定到当前$scope的函数，因此如果您这样做

ng-click="alert(123)"

它正在寻找功能$scope.alert ，但找不到它。 它不会在window对象中查找来找到它。

Answer 5

Ionics CSS附带以下规则：

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

从ionic.css中删除它或将其设置为auto应该可以解决此问题。

更新：

这不能解决OP的问题。 但是使用他的插件，从文档中删除ionic.css可以解决此问题。 只是提示，答案就在那儿;）

Answer 6

生成的离子代码的标题隐藏其自身按钮的方式。

<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>

标题在ionic.css中有一个css

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

在CSS规则position:absolute项目将放置在常规流程项目的顶部。

离子编码样式中可能有一种方法可以解决此问题，但我找不到。

所以我通过抬起按钮来固定它，使其再次覆盖标题

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

请注意，在此修复之后，如果标题文本足够长以至其下方，或者标题文本向左对齐，则左侧按钮将覆盖标题。