Javascript 角度指令，将单击事件绑定到外部元素不工作

我正在尝试创建一个自定义事件来切换角度。该指令称为toggleable

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

我写的代码如下

指令

'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'
  }
  })

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

</div>

模板

'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'
  }
  })

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

</div>

视图

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

嘿

切换链接似乎正在工作。我可以在单击链接时看到警报。问题是内容没有出现。看起来链接并不是真的与内容在同一个范围内，当我这样做的时候，会创建另一个范围

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

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

</div>

那么我如何才能做到这一点呢？

创建两个指令和一个服务来链接它们更为方便。大致来说：

app.service('toggleService', function() {
    var toggleables = {};

    this.registerToggleable = function(key, f) {
        toggleables[key] = f;
    }

    this.toggle = function(key) {
        var f = toggleables[key];
        f();
    }
});

app.directive('toggler', function(toggleService) {
    return {
        link: function(scope, elem, attrs) {
            elem.bind("click", function() {
                toggleService.toggle(attrs.toggler);
                // because the event handler operates outside of angular digest cycle
                scope.$apply();
            });
        }
    }
})

app.directive('toggleable', function(toggleService) {
    return {
        link: function(scope, elem, attrs) {
            function toggle() {
                scope.visible = !scope.visible;
            }

            toggleService.registerToggleable(attrs.toggleable, toggle);
        }
    }
});

除了在作用域上设置变量外，还需要对上面的内容进行调整，但您可以这样使用这两个选项：

<a href="" toggler="foo" >Click me to toggle</a>
<div toggleable="foo">
  Hey
</div>

嘿

通过这种方式，您可以在元素本身上声明切换功能，而无需基于ID的查找魔法。

为此目的创建两个指令和一个链接它们的服务更为方便。大致来说：

app.service('toggleService', function() {
    var toggleables = {};

    this.registerToggleable = function(key, f) {
        toggleables[key] = f;
    }

    this.toggle = function(key) {
        var f = toggleables[key];
        f();
    }
});

app.directive('toggler', function(toggleService) {
    return {
        link: function(scope, elem, attrs) {
            elem.bind("click", function() {
                toggleService.toggle(attrs.toggler);
                // because the event handler operates outside of angular digest cycle
                scope.$apply();
            });
        }
    }
})

app.directive('toggleable', function(toggleService) {
    return {
        link: function(scope, elem, attrs) {
            function toggle() {
                scope.visible = !scope.visible;
            }

            toggleService.registerToggleable(attrs.toggleable, toggle);
        }
    }
});

除了在作用域上设置变量外，还需要对上面的内容进行调整，但您可以这样使用这两个选项：

<a href="" toggler="foo" >Click me to toggle</a>
<div toggleable="foo">
  Hey
</div>

嘿

通过这种方式，您可以在元素本身上声明切换功能，而无需基于ID的查找魔法。

为此目的创建两个指令和一个链接它们的服务更为方便。大致来说：

app.service('toggleService', function() {
    var toggleables = {};

    this.registerToggleable = function(key, f) {
        toggleables[key] = f;
    }

    this.toggle = function(key) {
        var f = toggleables[key];
        f();
    }
});

app.directive('toggler', function(toggleService) {
    return {
        link: function(scope, elem, attrs) {
            elem.bind("click", function() {
                toggleService.toggle(attrs.toggler);
                // because the event handler operates outside of angular digest cycle
                scope.$apply();
            });
        }
    }
})

app.directive('toggleable', function(toggleService) {
    return {
        link: function(scope, elem, attrs) {
            function toggle() {
                scope.visible = !scope.visible;
            }

            toggleService.registerToggleable(attrs.toggleable, toggle);
        }
    }
});

除了在作用域上设置变量外，还需要对上面的内容进行调整，但您可以这样使用这两个选项：

<a href="" toggler="foo" >Click me to toggle</a>
<div toggleable="foo">
  Hey
</div>

嘿

通过这种方式，您可以在元素本身上声明切换功能，而无需基于ID的查找魔法。

为此目的创建两个指令和一个链接它们的服务更为方便。大致来说：

app.service('toggleService', function() {
    var toggleables = {};

    this.registerToggleable = function(key, f) {
        toggleables[key] = f;
    }

    this.toggle = function(key) {
        var f = toggleables[key];
        f();
    }
});

app.directive('toggler', function(toggleService) {
    return {
        link: function(scope, elem, attrs) {
            elem.bind("click", function() {
                toggleService.toggle(attrs.toggler);
                // because the event handler operates outside of angular digest cycle
                scope.$apply();
            });
        }
    }
})

app.directive('toggleable', function(toggleService) {
    return {
        link: function(scope, elem, attrs) {
            function toggle() {
                scope.visible = !scope.visible;
            }

            toggleService.registerToggleable(attrs.toggleable, toggle);
        }
    }
});

除了在作用域上设置变量外，还需要对上面的内容进行调整，但您可以这样使用这两个选项：

<a href="" toggler="foo" >Click me to toggle</a>
<div toggleable="foo">
  Hey
</div>

嘿

---

这样，您就在元素本身上声明了切换功能，没有基于ID的查找魔法。

每次更改Angular在Angular之外监视的内容时，您都必须调用

范围。$apply（）

。所谓外部，我指的是使用jQueryAPI绑定的事件——或者Angular的原生

ng click

等之外的任何其他方式

你也可以这样做：

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

或：

---

每次更改Angular在Angular之外监视的内容时，都必须调用

scope.$apply（）

。所谓外部，我指的是使用jQueryAPI绑定的事件——或者Angular的原生

ng click

等之外的任何其他方式

你也可以这样做：

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

或：

---

每次更改Angular在Angular之外监视的内容时，都必须调用

scope.$apply（）

。所谓外部，我指的是使用jQueryAPI绑定的事件——或者Angular的原生

ng click

等之外的任何其他方式

你也可以这样做：

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

或：

---

每次更改Angular在Angular之外监视的内容时，都必须调用

scope.$apply（）

。所谓外部，我指的是使用jQueryAPI绑定的事件——或者Angular的原生

ng click

等之外的任何其他方式

你也可以这样做：

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

或：

---

---

在事件侦听器中调用

scope.toggle（）。Thanks@NikosParaskevopoulos您可以将其作为答案发布吗？在事件侦听器中调用
scope.toggle（）
后，尝试调用
scope.$apply（）
。@NikosParaskevopoulos是的，它在调用scope.$appy（）后工作。Thanks@NikosParaskevopoulos您可以将其作为答案发布吗？在事件侦听器中调用
scope.toggle（）
后，尝试调用
scope.$apply（）
。@NikosParaskevopoulos是的，它在调用scope.$appy（）后工作。Thanks@NikosParaskevopoulos您可以将其作为答案发布吗？在事件侦听器中调用
scope.toggle（）
后，尝试调用
scope.$apply（）
。@NikosParaskevopoulos是的，它在调用scope.$appy（）后工作。Thanks@NikosParaskevopoulos你能把它作为一个答案吗？更优雅的谢谢。我将尝试此方法并让您知道结果，而不在事件侦听器中调用scope.$apply（）。它不起作用。和我原来的问题一样。非常感谢您提供了更具角度性的解决方案。当然，我没有注意到事件绑定将超出Angular的范围！很抱歉，我会编辑答案更优雅谢谢。我将尝试此方法并让您知道结果，而不在事件侦听器中调用scope.$apply（）。它不起作用。和我原来的问题一样。非常感谢您提供了更具角度性的解决方案。当然，我没有注意到事件绑定将超出Angular的范围！很抱歉，我会编辑答案更优雅谢谢。我将尝试此方法并让您知道结果，而不在事件侦听器中调用scope.$apply（）。它不起作用。和我原来的问题一样。非常感谢您提供了更具角度性的解决方案。当然，我没有注意到事件绑定将超出Angular的范围！很抱歉，我会编辑答案更优雅谢谢。我将尝试此方法并让您知道结果，而不在事件侦听器中调用scope.$apply（）。它不起作用。和我原来的问题一样。非常感谢您提供了更具角度性的解决方案。当然，我没有注意到事件绑定将超出Angular的范围！很抱歉，我将编辑答案