angularjs – 将角度模板分割成多个小模板
发布时间:2020-12-17 07:45:41 所属栏目:安全 来源:网络整理
导读:在我的Angular应用程序中,我试图了解将页面分解为组件的正确方法是什么. 更改前的页面类似于: div id='settings' p class='controlGroup' ng-controller="FirstCtrl" label class='control-label'First Control/label div class="control" !-- some inputs
在我的Angular应用程序中,我试图了解将页面分解为组件的正确方法是什么.
更改前的页面类似于: <div id='settings'> <p class='controlGroup' ng-controller="FirstCtrl"> <label class='control-label'>First Control</label> <div class="control"> <!-- some inputs --> </div> </p> <p class='controlGroup' ng-controller="SecondCtrl"> <label class='control-label'>Second Control</label> <div class="control"> <!-- some inputs --> </div> </p> </p> <button id='saveBtn' class='saveButton' ng-click='saveSettings()'>Save Changes</button> </div> 虽然控制逻辑分为两个不同的控制器,我也想分开它们的模板,所以很容易重用它们或将它们移动到不同的位置. 我看到很多选项:ng-include,脚本标签等 这样做的正确方法是什么?
使用ng-include,您可以使用不同的模板,只需将其注入到DOM的部分内容中,那么当您希望根据不同的情况(如点击导航按钮或变量)加载不同的视图时,这是很好的,请注意ng-include还编译模板,以便您可以在模板中使用控制器和其他角度特征和指令,以下是来自angularjs docs的示例:
这里是你的主要html: <!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller="Ctrl"> <select ng-model="template" ng-options="t.name for t in templates"> <option value="">(blank)</option> </select> url of the template: <tt>{{template.url}}</tt> <hr/> <div ng-include src="template.url"></div> </div> </body> </html> 这里是js: function Ctrl($scope) { $scope.templates = [ { name: 'template1.html',url: 'template1.html'},{ name: 'template2.html',url: 'template2.html'} ]; $scope.template = $scope.templates[0]; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |