javascript - 如何将此功能转变为符合 Angular 功能？

Question

我正在将一个 Bootstrap + jQuery 主题转换为 Angular JS，但在执行此操作时遇到了一些麻烦。一件事是主题的 JS 文件上提供了这种功能:

/* Sidebar Navigation functionality */
var handleNav = function() {

    // Animation Speed, change the values for different results
    var upSpeed     = 250;
    var downSpeed   = 250;

    // Get all vital links
    var allTopLinks     = $('.sidebar-nav a');
    var menuLinks       = $('.sidebar-nav-menu');
    var submenuLinks    = $('.sidebar-nav-submenu');

    // Primary Accordion functionality
    menuLinks.click(function(){
        var link = $(this);

        if (link.parent().hasClass('active') !== true) {
            if (link.hasClass('open')) {
                link.removeClass('open').next().slideUp(upSpeed);

                // Resize #page-content to fill empty space if exists
                setTimeout(resizePageContent, upSpeed);
            }
            else {
                $('.sidebar-nav-menu.open').removeClass('open').next().slideUp(upSpeed);
                link.addClass('open').next().slideDown(downSpeed);

                // Resize #page-content to fill empty space if exists
                setTimeout(resizePageContent, ((upSpeed > downSpeed) ? upSpeed : downSpeed));
            }
        }

        return false;
    });

    // Submenu Accordion functionality
    submenuLinks.click(function(){
        var link = $(this);

        if (link.parent().hasClass('active') !== true) {
            if (link.hasClass('open')) {
                link.removeClass('open').next().slideUp(upSpeed);

                // Resize #page-content to fill empty space if exists
                setTimeout(resizePageContent, upSpeed);
            }
            else {
                link.closest('ul').find('.sidebar-nav-submenu.open').removeClass('open').next().slideUp(upSpeed);
                link.addClass('open').next().slideDown(downSpeed);

                // Resize #page-content to fill empty space if exists
                setTimeout(resizePageContent, ((upSpeed > downSpeed) ? upSpeed : downSpeed));
            }
        }

        return false;
    });
};

这是一个在应用程序启动时运行的函数，负责在侧边栏上附加功能。基本上，这只是将句柄附加到侧边栏上链接的单击事件，以添加下拉效果并在需要时调整主容器的大小。

没关系，但是，我不知道如何使其成为“Angular 兼容”。我的意思是，我可以在 View 加载事件上运行它，但这似乎不是一个好主意。我想我需要使用指令，但在这种情况下我不知道如何使用。这不是应用于一个元素的东西，实际上是应用于一堆元素的一堆东西。

不仅如此，它还会干扰断开连接的元素:这还会调整主容器的大小，因此会调用页面其他元素上的某些功能。

如何将这个特定功能转换为符合 Angular 功能？

编辑 :我的想法是创建两个指令menu-link和submenu-link，然后将此指令应用于每个链接本身。指令中的代码与此处提供的代码相同。然而，这似乎并不实际，因为我需要一遍又一遍地放置该指令。

Answer 1

听起来你可能做了太多的工作...你见过 http://angular-ui.github.io/bootstrap/也如评论中所述，将 http://plnkr.co 放在一起显示到目前为止您的尝试，毫无疑问您可以获得解决方案(如果您使用 IRC 加入#angularjs 房间并寻求帮助)

编辑

嗨，w/r/t 评论，np，是的，您想要做的可能会涉及几个部分。如果指令具有直接的父子关系或者指令位于同一元素上，则可以在指令之间进行通信，您可以在定义指令时使用“require”属性，以便它可以要求将另一个指令中的 Controller 注入(inject)到其链接函数中(请参阅$如果有兴趣，请编译有关“需要”的文档)。

https://docs.angularjs.org/api/ng/service/ $编译

https://docs.angularjs.org/guide/directive

基本上还有两种其他方式可以在不同元素之间进行通信，我更喜欢第一种。第一种方法是使用注入(inject)到需要共享一些信息的两个组件中的服务，并且数据在服务中定义，因此当该服务(单例)注入(inject)到各个 Controller 中时，它们具有共享数据存储和一些功能。可以与事物之间进行通信。因此，对于您的示例，您有左侧导航，我假设您想要跟踪点击次数并在右侧面板中执行某些操作。您只需在服务中存储所需的有关事物状态的信息即可。

您可能会这样做的另一种方法是使用带有 $emit、$on 和 $broadcast 的事件，但我认为只有当您希望指令在“类似小部件”的架构中可用时，这才真正符合要求。小部件只是发出事件并以各种方式响应在其上广播的事件。不过，这对于作用域的父/子关系可能会出现问题，并且可能会导致事件触发事件等的疯狂无限循环。

通常，在 Angular 中，您会将指令应用于您希望它们生效的元素。指令定义可能会注入(inject)一个服务，为它提供更多信息，或者数据可以通过指令的范围传递(如果您隔离它)，然后您可以将该服务注入(inject)到 Controller 中以获取您想要的数据进入指令范围...抱歉，我知道这是抽象的，所以如果您需要在某处进行更多说明，请告诉我。

查看此问题的另一种方法是，您希望创建一个驻留在您的服务中的“ View 模型”，因为您希望它在各个 Controller 之间持久存在。

这是我发布的几个示例: Angular $http vs service vs ngResource

不要将上面的链接视为您真正想要做的事情，而只是一个服务示例，该服务具有一些数据以某种方式更新并注入(inject)到要在 View 中使用的服务中。从 Controller 中，数据被分配给范围的属性，以便可以在 View 中访问它。导致数据更新的事情并不重要，只要它在更改数据后调用 $rootScope.$apply() 以便 View 更新即可。

在此处检查 script.js 以获取有关正在发生的事情的评论 http://plnkr.co/edit/ABQsAxz1bNi34ehmPRsF?p=preview

要注意的是，在最后一篇文章中，不建议在 Controller 中设置监视来监视服务的方法，因为它使测试变得更加困难并且没有必要，请参阅第一篇文章，以及我决定不再这样做的地方一个好主意，改为使用 angular.copy。