Question

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

如果此输入的类型为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/

作为“ Bonus-Question ”：为什么即使设置replace: true，渲染也会中断？

非常感谢！

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

AngularJS：为什么复选框在指令中不起作用？（以及如何让他们工作？）

1 个答案:

AngularJS：为什么复选框在指令中不起作用？ （以及如何让他们工作？）

1 个答案:

AngularJS：为什么复选框在指令中不起作用？（以及如何让他们工作？）