Angularjs 将控制器变量传递给templateUrl指令内的ng类和ng模型

我正在尝试使用UI引导为简单的开关创建自定义元素，下面是一个示例：

<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模型跟踪Onorof状态，并通过插值设置初始状态，但这似乎对ng类不起作用。理想情况下，我希望能够在我的代码中使用如下内容：

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

---

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

请尝试一个指导说明（仅举个例子）

angular.module（'yourAppNam'，[]）.directive（'onoffSwitch'，function（）{
返回{
范围：{
名称：'='，
Onorof:“=”
},
模板：'
对
不
',
限制：“E”
};
})

请为您的示例尝试一个指令（仅用于示例）

angular.module（'yourAppNam'，[]）.directive（'onoffSwitch'，function（）{
返回{
范围：{
名称：'='，
Onorof:“=”
},
模板：'
对
不
',
限制：“E”
};
})

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

控制器：

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>',

    };
});

var-app=angular.module（'app'，['ui.bootstrap']）；
应用指令（'onoffSwitch'，函数（）{
返回{
限制：'E'，
范围：{
名称：'='，
Onorof:“=”
},
模板：“YesNo”，
};
});

要素：

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

---

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

控制器：

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>',

    };
});

var-app=angular.module（'app'，['ui.bootstrap']）；
应用指令（'onoffSwitch'，函数（）{
返回{
限制：'E'，
范围：{
名称：'='，
Onorof:“=”
},
模板：“YesNo”，
};
});

要素：

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

尝试删除初始值周围的插值（{}}）？它应该是

开或关=“{{{myController.initialValue}}”

谢谢，这两个建议的组合帮助很大！尝试删除初始值周围的插值（{}}）？它应该是

on或off=“{{{myController.initialValue}}”

谢谢，这两个建议的组合帮助很大！是的，我试图以这种方式使用指令，但我应该如何构造它？现在显示页面时，两个变量的计算都不正确，这与ng类内部的插值有关，需要解决。是的，我曾尝试以这种方式使用指令，但我应该如何构造它？现在，当页面显示时，这两个变量的计算都不正确，这与ng类内部的插值有关，需要解决。