AngularJS自定义指令初始加载不起作用答案

【问题标题】：AngularJS custom directive initial loading not workingAngularJS自定义指令初始加载不起作用
【发布时间】：2013-08-27 02:34:11
【问题描述】：

您可以查看working example here - 或者我应该说，无效的示例。

基本上，我正在尝试制作一个名为yesno-group 的自定义指令。这是一遍又一遍地这样做的捷径：

<div class="btn-group">
    <button type="button" class="btn btn-default" ng-model="checkboxField" btn-radio="true">Yes</button>
    <button type="button" class="btn btn-default" ng-model="checkboxField" btn-radio="false">No</button>
</div>

这是我的yesno-group 指令：

myApp.directive('yesnoGroup', function () {
    return {
        restrict: 'A',
        scope: {
            field: '=',
            buttonClass: '@'
        },
        replace: true,
        template:   '<div class="btn-group">' +
                    '    <button type="button" class="{{buttonClass}}" ng-model="field" btn-radio="true">Yes</button>' +
                    '    <button type="button" class="{{buttonClass}}" ng-model="field" btn-radio="false">No</button>' +
                    '</div>'
    };
});

问题是，yesno-group 没有在初始加载时显示该值。但是一旦您开始更改该值，它就会与 ngModel 字段同步。

我错过了什么？

另外，我怎样才能让 yesno 组接受 ng-model 并使用它而不是 field？我是从JsFiddle-Examples - currency input 那里得到的，但希望使用ng-model，除非它很麻烦。

谢谢！

【问题讨论】：

使用ng-model 而不是field 是直截了当的。只需这样做：（1）在您的隔离范围定义中替换 field: '=' 与 ngModel: '=' （2）在您的模板中编写 ng-model="ngModel" 和（3）使用指令时使用 <div yesno-group ng-model="checkboxField" ... 而不是 field="checkboxField"跨度>
@ThalisKalfigkopoulos 谢谢你的作品。我以为我试过了，但可能对其他问题感到困惑。
好吧，您想了解的是通过在指令中“要求”来使用 ngModelController - 而不仅仅是拥有一个名为“ngModel”的属性。

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

【解决方案1】：

你需要使用 ng-class，而不是 class。

http://jsfiddle.net/KT6Zd/12/

myApp.directive('yesnoGroup', function () {
    return {
        restrict: 'A',
        scope: {
            field: '=',
            buttonClass: '@'
        },
        replace: true,
        template:   '<div class="btn-group">' +
                    '    <button type="button" ng-class="buttonClass" ng-model="field" btn-radio="true">Yes</button>' +
                    '    <button type="button" ng-class="buttonClass" ng-model="field" btn-radio="false">No</button>' +
                    '</div>'
    };
});

【讨论】：