0

入力に変換される「フィールド」タグを定義する単純なディレクティブがあります。

この入力がタイプの場合、textすべて問題ありません。ただし、タイプcheckbox(またはradio) の場合は機能しなくなります。

<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>

これがフィドルです：http://jsfiddle.net/Scheintod/fK2R2/5/

そして「おまけ質問」として: 設定するとレンダリングが壊れるのはなぜreplace: trueですか?

どうもありがとう！

4

1 に答える 1

1

ここにあなたの答えがあります：

1. コードに小さな問題がありました
:

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

次のようになります。

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

それが、設定してもコードが機能しなかった理由ですreplace : true

2. type 属性を上書きしていました:
カスタム属性を使用typeし、html 属性で設定していましたtype。これが原因type="checkbox type"でした。

したがって、カスタム属性の宣言を避けることができますtype。

ここに修正されたフィドルがあります：http://jsfiddle.net/rC36m/1/

于 2013-09-04T17:31:41.253 に答える