Question

我正在开发一个包含任意数量HTML卡的项目，卡片的格式和位置是相同的，但它们的内容会有所不同。

我的计划是将每张卡的内容作为角度指令实现，然后使用ngRepeat循环遍历我的指令数组，这些指令可以按任何顺序显示，在卡片中显示每个指令。它会是这样的：

在我的控制器内：

$scope.cards = [
    'directice-one',
    'directive-two',
    //etc..
]

我的指示：

.directive('directiveOne', function () {
    return {
        restrict: "C",
        template: '<h1>One!!</h1>'
    };
})

.directive('directiveTwo', function () {
    return {
        restrict: "C",
        template: '<h1>Two!!</h1>'
    };
})

//etc..

我的HTML：

<div class="card" ng-repeat="item in cards">
    <div class="{{item}}"></div>
</div>

但..指令不呈现。所以我只得到class="directive-one"的div。

这可能是我的设计缺陷，某种语法错误，或只是角度的限制。我不确定。

我还考虑过制作一个指令<card>，然后将templateUrl:传递给它，但这会导致我失去对$scope的访问权限以及我的javsacript功能如果每张卡都是它自己的指令就会有。

所以，建议，代码帮助，任何事情都会非常有用！

Answer 1

在您的控制器中，您需要指令模块。然后将它们分配给范围变量，该变量将是您拥有的数组。当我到桌面时会用代码更新，尝试使用手机有点凝灰岩。

Answer 2

我只在需要在HTML标记中使用指令时选择指令。例如，假设卡片布局相同，并且根据用户偏好采用不同的信息。

HTML文件

<my-card Name="First" Option="Myoptions"></Card>
<my-card Name="Second" Option="GenOptions"></Card>

<强>指令

angular.module("testapp").directive("MyCard", function() {
scope: {
 name: '@',
 Option: '@'
 Controller: "myCardController",
 templateURL: "~/myCard/myCardTemplate.html"
}
});

在模板中，您可以通过指令实现从HTML页面传递的信息。

希望这有帮助。

请注意，在开发框架类型的东西时，首选上述方法。例如，您开发了一个Web框架，标头需要5个参数，这5个参数需要通过标记传递。最重要的是框架/标题是独立的

来自ngRepeat中数组元素的Angular指令

2 个答案: