Working Plunker

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

Plunker 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。离子按钮类添加z-index: 1。
Krytic指出，如果没有离子css链接，它将起作用（因为元素然后只是默认为相对位置而按钮没有被遮挡）。
aorfevre建议使用链接的原因不是因为它是一个锚标记，而是因为该链接已经应用了按钮类。

Answer 2

我认为您无法使用id？

指定指令

Angular doc说：

限制选项通常设置为：
  '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=preview 这里的模板：

<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的问题。但是使用他的plunkr，从文档中删除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;
}

请注意，在此修复后，如果标题文字足够长，或者标题文本左对齐，则左侧按钮将覆盖标题。

Ng Click在Nav Bar中不起作用

6 个答案:

Working Plunker

更新