gpt4 book ai didi

angularjs - 将 Angular 模板拆分为多个小模板

转载 作者:行者123 更新时间:2023-12-03 14:57:36 26 4
gpt4 key购买 nike

在我的 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>

虽然控制逻辑被分离到两个不同的 Controller ,但我也想将它们的模板分开,这样可以很容易地重用它们或将它们移动到不同的位置。

我看到很多选项: ng-include , script标签等

这样做的正确方法是什么?

最佳答案

使用 ng-include 您可以拥有不同的模板,并使用它简单地将它们注入(inject)到您的 DOM 的一部分中,当您想要根据不同的情况(例如单击导航按钮或变量等)加载不同的 View 时,这很有用,请注意ng-include 还编译模板,因此您可以在模板中使用 Controller 和其他 Angular 特性和指令,这是 angularjs 文档中的一个示例:

这是您的主要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];
}

关于angularjs - 将 Angular 模板拆分为多个小模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16397748/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com