Question

你可以看到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-group接受ng-model并使用它代替field？我是从JsFiddle-Examples - currency input得到的，但希望使用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>'
    };
});

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

1 个答案: