在我的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,script标签等.
这样做的正确方法是什么？
Ami*_*mir 13
使用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];
}
小智 0
指令是在 Angular 中创建可重用组件的自然选择：http ://docs.angularjs.org/guide/directive
| 归档时间： |
|
| 查看次数： |
14862 次 |
| 最近记录： |