javascript - Angular 1指令组件在模态和模态外有不同的行为

Question

我真的很难解决自定义指令组件的问题。我创建了基于 Angular ivh-treeview angular-ivh-treeview 的 TreeView 下拉组件。因为 ivh-treeview 默认情况下没有推荐的功能和风格，所以我扩展了它。但现在我面临着一个我以前从未见过的问题，我非常感谢您的帮助。该组件在模式中工作绝对正常。当您单击复选框时，它的 react 非常快，一切看起来都很棒。但是当我在任何其他页面(不在模式中)使用相同的组件时，它的行为非常奇怪。当您选择任何复选框时，它不会立即更新，您必须单击页面上的其他位置，或关闭并打开下拉列表才能查看更改。我不知道那里发生了什么以及为什么相同的组件在模式中工作。也许是因为 modalInstance 具有不同的范围，但我已经完成了。

在这里您可以查看并使用示例(第 1 页 - 模式，第 2 页 - 无模式): DEMO

这只是我必须包含的代码片段，以便能够链接到 Plunkr 上的演示

<ivh-dropdown ivh-model="treeStructureFinal" selected-array="formData.casinos" is-disabled="inReadMode" placeholder="Select casinos"></ivh-dropdown>

谢谢大家!

Answer 1

当这种事情发生时，我总是会想到$scope.$apply()。

所以我做了一个小的修改，现在指令工作正常，只需在点击处理程序的末尾添加一个 scope.$apply 即可:

        $document.bind('click', function (event) {
            var isClickedElementChildOfPopup = element.find(
                    event.target).length > 0;
            if (!isClickedElementChildOfPopup
                && element[0].children[1].classList.contains("show")) {
                element[0].children[1].classList.toggle("show");
            }
            scope.$apply();
        });

看看它的工作原理: https://plnkr.co/edit/s1UNCXNCZ46zXjte9lpZ?p=preview

希望有帮助。