Angular 指令，将单击事件绑定到外部元素不起作用 [英] Angular directive, binding click event to outside element not working

问题描述

我正在尝试创建一个用于切换 Angular 的自定义事件.该指令称为可切换的.

一开始听起来微不足道，但棘手的是我希望能够使用页面上的任何按钮或链接进行切换.

我写的代码如下

指令

'use strict';angular.module('onsComponents').directive('togglable', function() {返回 {限制:'A'，转置:真实，范围: {切换器 ID: '@',展示: '@'},链接:函数(范围，元素，属性){如果(！scope.togglerId){console.error("必须提供切换器ID")返回}scope.visible = (scope.show === 'true')scope.toggle = function() {警报(之前"+范围.可见)scope.visible = !scope.visiblealert("After " + scope.visible)}//绑定点击事件到给定的dom元素angular.element('#' + scope.togglerId).bind("click", function() {范围.toggle()})},templateUrl: 'app/components/toggler/toggler.html'}})

模板

视图

<a href="" id="toggleButton" >点击我切换</a><div togglable toggler-id="toggleButton">嘿

切换链接似乎有效.单击链接时，我可以看到警报.问题是内容没有出现.似乎链接实际上与内容不在同一范围内，执行此操作时会创建另一个范围.

如果我在模板中移动点击链接，如下所示，它可以工作.但这并不是我真正想要的.

<a href="" ng-click="toggle()" >点击我切换</a><div ng-transclude ng-show="visible">

那么我怎样才能做到这一点?

解决方案

每次你改变 Angular 在外面观察的东西时你都必须调用 scope.$apply()> 的角度.我所说的外部是指使用 jQuery API 绑定的事件 - 或者除了 Angular 的原生 ng-click 等之外的任何其他方式.

这样做:

scope.toggle = function() {scope.visible = !scope.visible;范围.$应用()；}

或者:

scope.toggle = function() {范围.$应用(函数(){scope.visible = !scope.visible;});}

I am trying to create a custom event for toggling with Angular. The directive is called toggleable.

It sounds trivial at first, but tricky bit is that i want to be able to to use any button or link on the page for toggling.

The code i have written is as below

Directive

'use strict';

angular.module('onsComponents')
.directive('togglable', function() {
return {
  restrict: 'A',
  transclude: true,
  scope: {
    togglerId: '@',
    show: '@'
  },
  link: function(scope, element, attrs) {
    if (!scope.togglerId) {
      console.error("Toggler id must be given")
      return
    }

    scope.visible = (scope.show === 'true')
    scope.toggle = function() {
      alert("Before " + scope.visible)
      scope.visible = !scope.visible
      alert("After " + scope.visible)
    }

    //Bind click event to given dom element
    angular.element('#' + scope.togglerId).bind("click", function() {
      scope.toggle()
    })


  },
  templateUrl: 'app/components/toggler/toggler.html'
  }
  })

The Template

<div ng-transclude ng-show="visible">

</div>

The View

<a href="" id="toggleButton" >Click me to toggle</a>
<div togglable toggler-id="toggleButton">
  Hey
</div>

The toggle link seems to be working. I can see the alerts when the link is clicked. The trouble is the content does not appear. It seems like the link is not really is in the same scope with the content, another scope is created when i do this.

If i move the click link within the template as below, it works. But that is not really what i want.

<!-- Move the link inside template -->
<a href=""  ng-click="toggle()" >Click me to toggle</a>
<div ng-transclude ng-show="visible">

</div>

So how can i achieve that ?

解决方案

You have to call scope.$apply() every time you are changing stuff that Angular watches outside of Angular. By outside I mean events bound using the jQuery API - or any other way besides Angular's native ng-click etc.

So do either:

scope.toggle = function() {
    scope.visible = !scope.visible;
    scope.$apply();
}

Or:

scope.toggle = function() {
    scope.$apply(function() {
        scope.visible = !scope.visible;
    });
}

这篇关于Angular 指令，将单击事件绑定到外部元素不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！