Question

我正在尝试创建一个指令，它是我的shell页面中的一个侧边栏，每当新的路径被点击时它都会相应地改变，并且将使用与该父路线相关的子菜单项填充自己。我有4个不同的菜单，它们是外部模板，我希望这些html文件的内容替换菜单，我的指令的链接功能到目前为止看起来像这样：

link: function(scope, element, attrs, ngModel) {
      scope.$on("$routeChangeSuccess", function (event, current, previous) {
                   element.html('<div ng-include=\'enterprisesMenu.html\'></div>');
                });
      };

但是元素没有更新，但是当我使用内联模板时元素会更新，但由于每个模板都很复杂，我不想在我的指令中包含那个html，我也试过element.html('<div ng-include src=\'enterprisesMenu.html\'></div>');

有什么想法吗？

Answer 1

尝试$compile：

element.html($compile('<div ng-include=\'enterprisesMenu.html\'></div>')
(scope));

Answer 2

您可以通过动态包含所需的模板来实现此结果。例如：

HTML：

<div class="your-sidebar" ng-controller="SidebarCtrl">
    <div ng-include="sidebar.url" ></div>
</div>

控制器：

app.controller("SidebarCtrl", function($scope) {
    $scope.sidebar = {
        url: "initial-url"
    };
    $scope.$on("$routeChangeSuccess", function(event, current, previous) {
        // decide potentially new value for $scope.sidebar.url
        $scope.sidebar.url = newValueCalculatedAbove;
    });
});

此解决方案不需要指令，只需要额外的控制器。它也可以用指令完成，上面的HTML是指令的模板，JS代码是 controller （不需要链接函数）。

用指令中的外部模板的内容替换元素的html？

2 个答案: