Question

使用angular-strap我可以像这样使用select指令：

<div class="btn-group">
    <span class="btn btn-default" disabled>Type:</span>
    <button type="button"
            class="btn btn-default"
            ng-model="vm.options.type"
            ng-change="vm.doSomething(vm.options)"
            bs-options="o.key as o.label for o in vm.types"
            data-multiple="1"
            bs-select>
    </button>
</div>

但是我想把这个标记包装在另一个指令my-select中，所以我可以像这样使用它：

<my-select label="Type"
       ng-model="vm.options.type"
       ng-change="vm.doSomething(vm.options)"
       bs-options="o.key as o.label for o in vm.types">
</my-select>

我能够通过简单地在指令的编译阶段添加元素属性来传递bs-options，但是我不能让ng-model和ng-change以不同的方式工作包装bs-select指令。

我已经阅读了使用ng-model将ng-change与ngModelController结合使用的方法，但我只想将其传递给包裹bs-select指令

编辑：添加指令代码注意：代码包含我的指令的不同前缀，我知道这一点。

angular
    .module('ticketApp.ui')
    .directive('ttSelect', ttSelect);

function ttSelect() {
    return {
        restrict: 'E',
        replace: true,
        require: 'ngModel',
        bindToController: {
            label: '@ttLabel',
            ngModel: '='
        },
        templateUrl: 'ui/tt-select/tt-select.html',
        controller: ttSelectController,
        controllerAs: 'vm',
        link: link,
        compile: compile
    };

    function link(scope, element, attrs, ngModel) {
        ngModel.$viewChangeListeners.push(function () {
            console.log('changed');
        });
    }

    function compile(element, attrs) {
        var bsOptions = document.createAttribute('bs-options');
        var bsSelect = element.children()[1];

        bsOptions.nodeValue = attrs.ttOptions;
        bsSelect.attributes.setNamedItem(bsOptions);
    }
}

function ttSelectController() {
    this.label = 'Label';
}

包装指令时使用ng-change和ng-model

0 个答案: