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

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));