17

在我的 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标签等。

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

4

2 回答 2

13

使用 ng-include 您可以拥有不同的模板，并使用它简单地将它们注入到您的 DOM 的一部分中，当您想要根据不同的情况（例如单击导航按钮或变量等）加载不同的视图时，这很有用，请注意ng-include 还编译模板，因此您可以在模板中使用控制器和其他角度特性和指令，这是 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];
}
于 2013-05-06T12:04:37.100 回答
0

指令是在 Angular 中创建可重用组件的自然选择：http: //docs.angularjs.org/guide/directive

于 2013-05-06T11:58:47.120 回答