Issue
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!
Solution
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/
Answered By - Rax
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.