AngulaJS: Why don't checkboxes work in directives? (And how to get them to work?)

StackOverflow https://stackoverflow.com/questions/18354079

Domanda

I have simple directive which defines a "field" tag which is translates to an input.

If this input is of type text everything is ok. But if it's of type checkbox (or radio) it stops working.

<body ng-app="MyApp" ng-controller="MyCtrl">

    <h1>This is ok:</h1>
    T1: <input type="text" ng-model="data.aText" ></input><br/>
    T2: <field type="text" model="data.aText" ></field><br/>
    T3: {{data.aText}}
    <hr/>

    <h1>This does not work:</h1>
    C1: <input type="checkbox" ng-model="data.aBoolean" ></input><br/>
    C2: <field type="checkbox" model="data.aBoolean" ></field><br/>
    C3: {{data.aBoolean}}
    <hr/>

</body>

<script>

var App = angular.module('MyApp', [] );
App.directive( 'field', function(){

    return {
        restrict: 'E',
        scope: { model: '=', type: '@' },
        replace: false,
        template: '<input ng-model="model" type="{{type}}" />'
    } 
} );
var MyCtrl = function( $scope ){
    $scope.data = {};
    $scope.data.aText = 'Test Text';
    $scope.data.aBoolean = true;
    return $scope;
}


</scipt>

Here is the Fiddle: http://jsfiddle.net/Scheintod/fK2R2/5/

And as a "Bonus-Question": Why does even the rendering break if setting replace: true?

Thanks a lot!

È stato utile?

Soluzione

Here are your answers :

1. There was a small issue in your code :
You used

<field type="checkbox" ng-model="data.aBoolean"></field>

which should be :

<field type="checkbox" model="data.aBoolean"></field>

That's the reason why your code was not working even if you set replace : true

2. you were overwriting type attribute :
You were using custom attribute type and setting it by html attribute type. which was causing type="checkbox type".

So you can simply avoid declaring custom attribute type.

Here is corrected fiddle : http://jsfiddle.net/rC36m/1/

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top