Question

请阅读以下代码：

<div ng-repeat="item in data.items">
    <list-item></list-item>
</div>

上述指令（listItem）的Html（list_item.html）如下所示（仅显示了html的一小部分）：

<div class="active-icon-list">
    <switch-check status="{{ item.status }}"></switch-check>
</div>

上述指令的js如下：

directives.directive('cusListItem', function(){
    return {
        replace: true,
        restrict: 'E',  
        templateUrl: "list_item.html",
        link: function($scope, iElm, iAttrs, controller) {
            // -----
        }
    };
});

上述指令（switchCheck）的Html（switch_check.html）如下：

<div class="make-switch switch-small switch-mini active-list-switch">
    <input type="checkbox" checked ng-if="status == 'active'">
    <input type="checkbox" ng-if="status == 'inactive'">
</div>

上述指令的js如下：

directives.directive('switchCheck', function($timeout) {
    var switches = [];
    return {
        replace: true,
        restrict: 'E',
        scope: { status: '@'},
        templateUrl: "switch_check.html",
        link: function postLink($scope, iElm, iAttrs) {
            iElm['bootstrapSwitch']();
        }
    }
});

我已经为了可重用性而制定了指令。由于我使用的是bootstrapSwitch.js而不是普通的复选框，因此我创建了一个指令。如果删除ng-if并写入传统的输入标记，则可以正常工作。

<input type="checkbox" checked>

但如果我使用ng-if，则iElm['bootstrapSwitch']();失败并且复选框根本不显示。有没有办法（一个有效的方法）找出这个解决方案？如果我的问题不明确，请告诉我。

Bootstrap开关不适用于ng-repeat内的嵌套指令

0 个答案: