Question

我正在为Web开发项目创建一组可重复使用的指令。假设我在index.html中有以下工作代码：

<div class="card-select">
    <select ng-model="itemSelector" 
            ng-options="name for name in ctrl.itemNames"
            ng-change="ctrl.loadItem(itemSelector)">
    </select>
</div>

我希望能够用更简单的标签代替它，例如：

<card-select>
    <!-- somehow specify the model, options, and change method either here or in attributes-->
</card-select>

带有一个单独的文件，也许叫做card-select.html，如下所示：

<div>
    <select ng-model="<whatever was specified in index.html>"
            ng-options="<whatever was specified in index.html>"
            ng-change="<whatever was specified in index.html>">
    </select>
</div>

位于我的控制器文件中的指令如下：

app.directive('cardSelect', function() {
    return {
        restrict: 'E',
        transclude: true,
        templateUrl: "/ui/elements/card-select.html"
    };
});

然后，我可以在需要使用这些选择元素之一的地方使用卡片选择标签，从而在样式，外观更好的代码等方面保持一致。但是显然我缺少了一些东西。

所以我想这个问题归结为...说我有一个名为“ card-select”的指令，该指令使用包含select元素的模板。如何从使用指令的.html文件中将ng-model，ng-options和ng-change属性注入（或包含）到模板中？

在Angular中创建模块化选择指令

0 个答案: