标签: angularjs-ng-click

我正在尝试将回调函数从控制器传递给指令.

这是回调函数代码:

$scope.onImageSelect = function(image) {
    alert('SET');
    $scope.card.image = image;
};

指令用法:

<google-image-search callback="onImageSelect" />

指令代码:

ngmod.directive('directive', function() {
    return {
        templateUrl: '/templates/template.html',
        scope: {
            callback: '&'
        }
    }
});

模板中的回调用法:

<a data-ng-click="callback(url)"></a>

但是,这给了我以下错误:

TypeError: Cannot use 'in' operator to search for 'onImageSelect'

我见过很多类似的问题,但无法理解我错在哪里.

我一直在寻找修改AngularJS ng-click指令来添加一些额外的功能.我对使用它有什么不同的想法,但一个简单的方法是将Google Analytics跟踪添加到所有ng-click,另一个是防止双击.

要做到这一点,我的第一个想法是使用装饰器.所以像这样:

app.config(['$provide', function($provide) {
  $provide.decorator('ngClickDirective', ['$delegate', function($delegate) {
    // Trigger Google Analytics tracking here
    return $delegate;
  }]);
}]);

但是这不会起作用,因为装饰器会在实例化时触发,而不是在满足指令中的表达式时触发.因此,在这种情况下,它会在带有指令的元素加载时进行分析,而不是在单击元素时进行分析.

所以关于真正的问题.装饰器是否有某种方法可以获得指令实例化的元素？如果我可以,从委托,到达元素,我可以绑定我自己的点击事件,以触发除ng-click之外.

如果没有,您将如何在所有ng-clicks上添加内容？

ng-click是否可以使用img标签？

<img ng-src="img" ng-click="openNewWindow(url)/>

myFunction在控制器中定义,并且$ scope可用...没有任何东西被调用; 有任何想法吗？

(我想在点击图像时打开一个新的标签/窗口,但我甚至没有进入我的功能)

谢谢你的任何信息

编辑 我在第一次提出这个问题时可能会匆匆忙忙.我现在知道为什么它在我的情况下不起作用:我正在使用jQuery操纵图像以获得某种"画廊"效果......(如果有人知道如何在AngularJS中执行此操作请将其启用).这是我正在谈论的HTML:

<div class="commercial-container">
    <img class="commercial" ng-src="pathToImageOrImageVar" ng-click="openNewWindow(urlToOpen)" />
    <img class="commercial" ng-src="pathToImageOrImageVar" ng-click="openNewWindow(urlToOpen2)" />
    <img class="commercial" ng-src="pathToImageOrImageVar" ng-click="openNewWindow(urlToOpen3)" />
    <img class="commercial" ng-src="pathToImageOrImageVar" ng-click="openNewWindow(urlToOpen4)" />
</div>

在这里我使用jQuery创建淡入/淡出效果(显示一个图像,然后是下一个等等,无限期)

 function fadeInLastImg(){
    var backImg = $('.commercial-container img:first');
    backImg.hide();
    backImg.remove();
    $('.commercial-container' ).append( backImg );
    backImg.fadeIn();
};

所以我真正的问题是:

• 我怎样才能获得与jQuery相同的行为,以便图像可以点击？

你当然可以提供一个更好的解决方案(也许是AngularJS)来改变这样的图像,如果你知道一个......

谢谢

是否有可能在捕获阶段而不是冒泡阶段进行angularjs ng-click过程事件？我希望从父元素开始按顺序聚合每个父元素的数据,并以单击的元素结束.

我正试图了解指令,我可以轻松地使用模板函数抛出我的HTML,但是,如果我在我的模板中有一个ng-click,我如何在链接函数中访问它？

我的指示:

app.directive('directiveScroll', function () {
return {
      restrict: 'AE',
      replace: 'true',
      template:   '<div class="scroll-btns">' +
            '<div class="arrow-left" ng-click="scrollLeft(sectionID)"></div>' +
            '<div class="arrow-right" ng-click="scrollRight(sectionID)"></div>' +
        '</div>',
      link: function(scope, elem, attrs) {
        $scope.scrollRight  = function () {
          console.log("scrollRight  clicked");
        };
        $scope.scrollLeft  = function () {
          console.log("scrollLeft  clicked");
        };
      }
  };
});

正如您所看到的,我已添加$scope.scrollRight到我的link功能中,但是在单击时,控制台中没有任何内容.

如果我放置:

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

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

在我的控制器中(并且在我的指令中),它按预期工作.

任何帮助赞赏.

我的控制器中有一个如下所示的函数:

AngularJS:

$scope.toggleClass = function(class){
    $scope.class = !$scope.class;
}

我希望通过传递我想要切换的类的名称来保持通用性:

<div class="myClass">stuff</div>
<div ng-click="toggleClass(myClass)"></div>

但是myClass没有被传递给角度函数.我怎样才能让它发挥作用？如果我这样编写它,上面的代码是有效的:

$scope.toggleClass = function(){
    $scope.myClass = !$scope.myClass;
}

但是,这显然不是一般的.我不想在名为的类中进行硬编码myClass.

我在一个容器内有一个ng-click元素,不应该执行这个click操作.它具有与此类似的结构:

<div class="container" ng-click="takeSomeAction()>
    <p>Some content</p>
    <a class="btn" ng-href="#{{whatever}}">button content</a>
</div>

takeSomeAction()单击按钮时如何防止执行？

我正在努力在HTML表格行上实现类似iOS的滑动到删除手势.例如,向左滑动Site11将从标准行转动:

进入可删除的行:

我有这个功能与ng-swipe-left指令一起使用.但是,我还在ng-click每行导航到应用程序的不同视图的指令.目前,当我在一行上执行滑动时触发这两个事件,除非滑动在"Site11"文本本身上结束,而不是在行内的任何其他位置.例如,此手势将触发ng-click和ng-swipe-left处理程序:

但这个手势只会触发ng-swipe-left处理程序:

ng-click如果在行上执行滑动,无论滑动在何处结束,如何防止处理程序被触发？

这是我的HTML结构的要点,它定义了每一行:

<tr ng-repeat="item in items">
  <td ng-click="openDetailPane()"
      ng-swipe-left="$parent.swipeDeleteItemId = item.Id" 
      ng-swipe-right="$parent.swipeDeleteItemId = 'none'">
    <div list-item></div>
  </td>
  <td>
    <i class="fa fa-angle-right fa-2x" />
      <span>{{item.ChildCount}}</span>
  </td>
</tr>

删除按钮在list-item指令内定义; 只有当它的ID与swipeDeleteItemId控制器上的属性匹配时才可见:

<div class="list-item">
  <span>{{item.Name}}</span>
  <div ng-class="{true: 'is-visible', false: ''}[item.Id === swipeDeleteItemId]">
    <div class="delete-item-swipe-button" 
         ng-mousedown="$event.stopPropagation();" 
         ng-click="$event.stopPropagation();">Delete</div>
  </div>
</div>

我应该提一下,我只在Chrome和IE11的桌面版本中试过这个 - 我假设从鼠标注册中单击并拖动与移动设备上的滑动相同.

我需要在Ionic Framework中传递按钮ID.

这是我尝试过的.

在js代码中:

angular.module('todo', ['ionic'])
.controller('TodoCtrl', function($scope) {
    {
        $scope.showAlert = function(btnId) {
            alert(btnId);
        };
    }
});

在html中:

<button id="a" class="button button-light"  data="{{button.id}}" ng-click="showAlert(data.id)">
    Click Me
</button>

O/P: undefined

要么

<button id="a" class="button button-light"  data="{{button.id}}" ng-click="showAlert(data)">
    Click Me
</button>

O/P: undefined

要么

<button id="a" class="button button-light"  data="{{event.id}}" ng-click="showAlert(data.id)">
    Click Me
</button>

O/P: undefined

要么

<button id="a" class="button button-light" ng-click="showAlert(this.id)">
    Click Me
</button>

O/P: undefined

要么

<button id="btnId" class="button button-light" ng-click="showAlert('btnId')">
    Click Me
</button>

O/P: btnId

这是在函数中直接写入按钮id的正确方法吗？

我提到了几个像这样的答案.所以我认为我在使用它时犯了一些错误.请让我知道我需要改变什么.

我正在Microsoft Edge上测试我的应用程序,它会抛出此错误:

    app.config(
        function ($routeProvider) {
      $routeProvider.
          when('/logout', {
              template: '<logout-page></logout-page>'
          })
          .when('/', {
              template: '<application-manage></application-manage>'
          })
});

在我的索引中:

<body  style="height: 100%">
<div class='main-div' style="height: 100%;" ng-view ng-class="slide">Loading....</div>
</body>

第一种情况:'<application-manage></application-manage>'它正常工作.但是当我点击退出时.它抛出错误:

SyntaxError <div class="main-div ng-scope" style="height: 100%" ng-class="slide" ng-view="">

感谢大家.问题解决了,这是因为我使用基本身份验证的方式:

jQuery.ajax({
              type: "GET",
              url: logoutURL ,
              async: true,
              username: fakeUser,
              password: fakePassword,
              headers: {"Authorization": "Basic Authorization"}
          }).done(function () {
             console.log("Can not logout Basic Authentication in this browser");
         defer.resolve(true);
            }).fail(function () {
                console.log("You have successfully logged out!");
                defer.resolve(true);
           });

从: …