分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularjs – 将角度模板分割成多个小模板，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

在我的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];
}