Question

我正在使用angular-ui-router应用程序处理angular.js.

我的应用中有一个状态模仿弹出一种状态。

我创建了一个指令，负责在有人点击弹出元素之外时将应用移动到其他状态。

我用我的代码创建了一个js.fiddle： http://jsfiddle.net/lobengula3rd/1e908559/8/

状态1 - 是弹出状态。

状态2 - 是一个不同的状态。

我在状态2中有一个链接，当点击它时会将状态更改为状态1（弹出状态）：

<a ui-sref="state1">state1</a>

这是我的指令代码：

.directive('closeOnOuterClick', ['$document', '$state', function ($document, $state) {
        return {
            restrict: 'A',
            link: function (scope, element, attributes) {

                $document.on("click", function (evt) {
                        $document.off('click');
                        $state.go(attributes['closeOnOuterClick']);
                });

                element.on("click", function (evt) {
                    evt.stopPropagation();
                });

            }
        };
    }]

问题在于，出于某种原因，＆＃39; document.on＆＃39;在创建弹出元素后立即触发click事件，从而将我抛弃。我不明白为什么函数会被立即调用。

如果我改变我的控制器（第20行），那么在应用程序启动时我将转到state1而不是state2，它将在第一次正常工作。

我尝试将更改状态的链接更改为将在我的控制器中调用函数的ng-click事件，但这也没有用。

我的代码有什么问题？

Answer 1

我想出了问题。

我有angular-ui-router版本0.2.0。将其更新到版本0.2.11解决了这个问题，原因不明。

如果我将链接更改为ng-click而不是调用最终将改变状态的函数的ui-sref，那么你也应该像这样直接调用$ event（angular object）停止传播：< / p>

STATE1

Answer 2

您是否尝试将指令内的$ document更改为element？第28行

 element.on("click", function (evt) {
          $document.off('click');
           $state.go(attributes['closeOnOuterClick']);
 });

这对我来说很有用：http://jsfiddle.net/1e908559/10/

监听文档click事件的指令在创建后立即被触发

2 个答案: