Question

我有一个复选框，设置为ng：model foo.bar。然后我有一个自定义指令，呈现一个应该切换复选框的链接。该链接正确更新了模型，但没有选中该复选框。有任何想法吗？文本输入具有正确的值。

当我删除ng-true-value和ng-false-value时，一切都按预期工作。

HTML：

<input type="input" ng:model="foo.bar" />
<input type="checkbox" ng:model="foo.bar" ng:true-value="1" ng:false-value="0" />
<my:directive></my:directive>    
<script type="text/ng-template" id="/tpl.html">
  <a href="" ng:click="toggleModel()">Toggle Value</a>
</script>

和JS：

app.controller('MainCtrl', function($scope) {
    $scope.foo = {
      bar: 1
    };
})
.directive('myDirective', function() {
  return {
    restrict: 'E',
    templateUrl: '/tpl.html',
    link: function($scope) {
      $scope.toggleModel = function() {
        $scope.foo.bar = $scope.foo.bar === 0 ? 1 : 0;
      };

    }
  }
})

工作人员：http://plnkr.co/edit/kdSB1fPplkseCKw89k6E

Answer 1

您将foo.bar设置为指令中的整数，但复选框正在使用字符串。最好始终使用字符串。因此，在您的指令中，而不是：

$scope.foo.bar = $scope.foo.bar === 0 ? 1 : 0;

使用它：

$scope.foo.bar = $scope.foo.bar === "0" ? "1" : "0";

然后，在您的控制器中，将您的init切换到：

bar: "1"

Updated plunker

使用ng-true-value / ng-false-value时，使用ngModel的复选框与指令无法正确绑定数据

1 个答案: