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

我试图创建一个指令，这是一个在我的外壳页面的边栏，每当新的路径被击中时都会相应地改变，并且会用与该父路径相关的子菜单项来填充自身。我有4个不同的菜单，这是外部的模板，我想那些HTML文件的内容替换菜单，我的指令的链接功能看起来像这样至今：用指令中的外部模板的内容替换元素的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>');

任何想法？

来源

2013-11-25 Mohammad Sepahvand

不是100％的话题，但你的问题听起来像你应该阅读：http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a- jquery-background – TheHippo

谢谢，是的，我已经读过，有点难以整合到你的实践中。您认为实现此功能的更有角度的方式是什么？ –

尝试$compile：

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

来源

2013-11-25 11:47:36 AlwaysALearner

谢谢，几乎做到了这一招，但我不得不在模板周围放置双引号，最终如下所示：'element.html（$ compile（'

'）（scope））;' –

你可以通过动态NG-包括所需的模板达到这个结果。例如：

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代码控制器（不需要链接功能）。

来源

2013-11-25 11:48:10

谢谢。是的，我正在考虑是否使用控制器或指令，控制器从一开始就显得更简单，但不知何故，我处于印象指令之下是要走的路。哪种方法更具角度？指令或控制器？ –

这件事情并不重要，但我会去做这个指示。见答案的最后一段;代码是相同的，你只需要将它包装在一个指令声明中。无论如何，我会避免使用'$ compile'，因为有一个更简单的选择 - 'ng-include'（但这是个人观点）。 –

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

回答

相关问题