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

【问题标题】：Pass controller variables to ng-class and ng-model inside templateUrl directive将控制器变量传递给 templateUrl 指令中的 ng-class 和 ng-model
【发布时间】：2015-10-21 17:11:47
【问题描述】：

我正在尝试使用 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>

我该怎么做呢？我对 Angular 还很陌生，所以如果我的方法有任何明显的缺陷，请原谅我。

【问题讨论】：

尝试移除初始值周围的插值 ({{}})？
应该是on-or-off="{{myController.initialValue}}"
谢谢您，您的两个建议的结合帮助很大！

标签： angularjs angularjs-directive angular-ui-bootstrap

【解决方案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'
    };
})

【讨论】：

是的，我试图以这种方式使用指令，但我应该如何构造它？现在，当页面显示时，这两个变量都没有正确评估，这与 ng-class 内的插值有关，需要解决。

【解决方案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>

【讨论】：