link 在被 Angular JS 包含时不再有效

Question

我开发了一个页面，当所有 HTML 都包含在单个 HTML 页面中时，该页面可以完美运行。但是，既然我的页面看起来和工作得很好，我想将它分解成包含，这样我就可以在应用程序中创建更多页面，而不必重新创建菜单等。

菜单是一段代码，其中包括由链接激活的下拉菜单。

我在 Angular JS 中使用自定义指令来分解包含，所以我的菜单看起来像这样：

index.html:

<sidebar-standard></sidebar-standard>

includes/sidebar-standard.html:

<li>
    <a href="javascript:;">my link</a>
    <ul class="sub-menu">
        <li>
            <a href="anotherlink.html">test</a>
        </li>
    </ul>
</li>

app.js:

app.directive('sidebarStandard', function() {
    return {
        restrict: 'E', // E = Element Include
        templateUrl: '/includes/sidebar-standard.html'
    };
});

这有效，我的边栏也包括在内，但 javascript 下拉菜单不再起作用。当我将 HTML 直接放入 index.html 时，一切正常，但是当我通过 Angular 添加它时，它不起作用。控制台日志中没有错误。

如何调试这个问题？任何人都可以提供的任何方向将不胜感激。

提前致谢！

Answer 1

为了跟进这个问题，我必须做的是一些评论所建议的：在指令中包含点击控制功能。在查看了很多其他人的代码，并看到了这个应用程序的前作者所做的之后，我最终从使用指令改为使用控制器。

所以，index.html：

<div data-ng-include="'/includes/sidebar-standard.html'" data-ng-controller="SidebarController"></div>

app.js

app.controller('SidebarController', ['$scope', function($scope) {
    $scope.$on('$includeContentLoaded', function() {
        Layout.initSidebar();
    });
}]);

传递 initSidebar() 是关键。谢谢各位指路！非常感谢在研究方向上的帮助。 =)

link 在被 Angular JS 包含时不再有效

link no longer works when included by Angular JS

javascript

angularjs

angularjs-directive