Question

我正在尝试使用UI Bootstrap为简单的开关开关创建自定义元素，这是一个例子：

<div class="btn-group" name="buttonName">
            <label ng-class="{'btn btn-default': !onOrOff, 'btn btn-primary': onOrOff}" ng-model="onOrOff" uib-btn-radio="true" uncheckable>Yes</label>
            <label ng-class="{'btn btn-default': onOrOff, 'btn btn-warning': !onOrOff}" ng-model="onOrOff" uib-btn-radio="false" uncheckable>No</label>
</div>

我想要做的是能够使用ng-model跟踪onOrOff状态并通过插值设置初始状态，但这似乎不适合ng-class。理想情况下，我希望能够在我的代码中使用这样的东西：

<onoff-switch name="buttonName" onOrOff="{{myController.initialValue}}"></onoff-switch>

我该怎么做呢？我对棱角分明是个新手，所以如果我的方法有任何明显的缺陷，请原谅我。

Answer 1

为您的示例尝试一个指令（仅作为示例）。

angular.module('yourAppNam', []).directive('onoffSwitch', function(){
    return {
        scope: {
            name: '=',
            onOrOff: '='
        },
        template: '<div class="btn-group" name="{{name}}">
            <label ng-class="{'btn btn-default': !onOrOff, 'btn btn-primary': onOrOff}" ng-model="onOrOff" uib-btn-radio="true" uncheckable>Yes</label>
            <label ng-class="{'btn btn-default': onOrOff, 'btn btn-warning': !onOrOff}" ng-model="onOrOff" uib-btn-radio="false" uncheckable>No</label>
</div>',
        restrict: 'E'
    };
})

Answer 2

解决了这个问题，这是一个似乎有效的解决方案：

控制器：

var app = angular.module('app', ['ui.bootstrap']);

app.directive('onoffSwitch', function () {
    return {
        restrict: 'E',
        scope: {
            name: '=',
            onOrOff: '='
        },
        template: '<div class="btn-group" name="{{name}}"><label ng-class="{\'btn btn-default\': !onOrOff, \'btn btn-warning\': onOrOff }" ng-model="onOrOff" uib-btn-radio="true" uncheckable>Yes</label><label ng-class="{\'btn btn-default\': onOrOff, \'btn btn-primary\': !onOrOff }" ng-model="onOrOff" uib-btn-radio="false" uncheckable>No</label></div>',

    };
});

元素：

<onoff-switch name="buttonName" on-or-off="myController.initialValue"></onoff-switch>

将控制器变量传递给templateUrl指令内的ng-class和ng-model

2 个答案: