angularjs - AngularJS自定义指令初始加载不起作用

Question

您可以在此处查看工作示例- 或者我应该说，非工作示例。

基本上，我正在尝试制作一个名为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-group 接受ng-model并使用它而不是field？我是从JsFiddle-Examples -货币输入ng-model中得到的，但除非很麻烦，否则希望使用它。

谢谢！

Answer 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>'
    };
});