在 AngularJS 中构建视图

Question

我正在使用来自 Backbone 的 AngularJS 创建我的第一个应用程序。作为第一个练习，我想将我编写的现有主干应用程序移植到 AngularJS。

该应用程序由一个带有 3 个 div 的主视图组成。

<!-- main.html -->
<div id="filter"></div>
<div>
    <div id="result-list"></div>
    <div id="result-details"></div>
</div>

到目前为止，我能够在 Angular 中创建我的 mainView

// My Route
$routeProvider.when("/", {
    controller: "mainController",
    templateUrl: "app/components/main/main.html"
});

...

// My mainController
'use strict';
app.controller('mainController', function ($scope) {});

我现在要做的是在我的主视图的div 过滤器上绑定第二个称为过滤器的视图。但是我读到在 Angular 中你只能有 1 个视图。并且主干中视图的等价物对应于角度中的指令。

我有 read into the different semantics 的角度，但我仍然对如何进一步在我的应用程序中实现这一点感到困惑。

谁能帮我理解一下？可能我还是看错了。

Answer 1

正如您所提到的，主干中的视图等同于角度中的指令。因此，要创建结果列表视图，您需要创建指令。

<results-list></results-list>

在你的指令代码中：

angularApp.directive("resultsList", function() {
     return {
       restrict: "AEC", // Attribute, element, class
       template: " <div id="result-list">remaining code here</div>",
       // if its in separate file then
       // templateUrl : "",
       link : function(scope, element, attrs) {
             // add your logic to customize
             // binding events etc
       }
     }
});

现在您可以在任何需要的地方重复使用该指令。如果您有控制器内部指令所需的逻辑和数据，那么您可以使用 link 函数中的 scope 变量来引用它。