0

我有一个简单的指令，它定义了一个转换为输入的“字段”标签。

如果此输入是类型，text则一切正常。但如果它是类型checkbox(or 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并通过 html 属性设置它type。这是导致type="checkbox type".

所以你可以简单地避免声明自定义属性type。

这是更正的小提琴：http: //jsfiddle.net/rC36m/1/

于 2013-09-04T17:31:41.253 回答