angularjs - 这是指令的正确用法吗?

标签 angularjs angularjs-directive

我的任务是为大型 Angular 应用程序设置初始应用程序结构,我遇到了一些博客文章,基本上说一切都应该是指令(我大多同意),但我有一种感觉我已经采取了这个想法太远了..

我所得到的基本上是 - 当您导航到 portal 时ui-router 将从模板文件夹加载门户模板,实际模板中的所有内容是 <portal-view></portal-view .. portalView指令基本上整个 View 都包含在指令中。

路线

angular.module('portal').config([
'$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('portal', {
        url: "/",
        templateUrl: "templates/portal.tpl.html"
    });
}]);

portal.tpl.html

<div class="container">
<portal-view></portal-view>
</div>

portalView指令

angular.module('portal').directive('portalView', function() {
return {
    controller: 'portalController',
    controllerAs: 'vm',
    templateUrl: "/directives/portalView/portalView.tpl.html"
}});

portalView文件夹

  • 门户 View
    • portalView.controller.js
    • portalView.js
    • portalView.less
    • portalView.tpl.html

在我看来,这似乎是一个好主意,但当我们开始向应用程序添加更多 View 时,我可能会觉得它变成了一件苦差事,但我希望一些有 Angular 的专业人士会告诉我这是最好的方法:)

任何帮助、建议和链接将不胜感激!

最佳答案

对我来说,组件化 View 并将其放入指令中似乎是一个聪明的主意。如果发生的话,这也将简化向另一个路由器的迁移。

portal.tpl.html如果您打算遵循这种做法,则没有必要,template: '<portal-view></portal-view>'就足够了。但如果您计划使用模板来加载 css 和 js 资源(在模板中使用脚本并不直接,但这是可能的),请不要拒绝它,它会非常适合该方案。

关于angularjs - 这是指令的正确用法吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29815512/

相关文章:

javascript - 如何以及在何处使用 ng-flow 保存上传的文件?

angularjs - ui-router $stateChangeStart 上的无限循环

javascript - Angular : checkbox group's validation is out of sync with the model

angularjs - 如何将数据从编译传递到AngularJS中的链接函数?

javascript - angularjs 指令检查是否最小。复选框列表中的一项被选中

javascript - 使用angularjs ng Repeat和Routes时如何处理内存泄漏?

javascript - 当用户单击链接时如何加密数据并在新选项卡中打开 PDF

javascript - ng-controller 指令和路由中的 Controller 有什么区别?

angularjs - 为什么在注释中使用 AngularJS 指令

angularjs - 两个指令(未嵌套在 HTML 中)如何相互通信?