Question

当具有变量输入类型复选框时，该值未正确设置。

此代码已经过简化，以解决问题。

controller.coffee

angular.module 'tinyhandsAmenApp'
.controller 'TestrouteCtrl', ($scope) ->
  @user =
    admin: true

directive.coffee

angular.module 'tinyhandsAmenApp'
.directive 'formInput', ->
  restrict: 'EA'
  scope:
    model:  '='
  template: '<input ng-model="model" type="{{ type }}"/>'
  link: (scope, element, attrs) ->
    scope.type = "checkbox"

example.html的

<div class="col-md-12" ng-controller="TestrouteCtrl as tr">
    <input type="checkbox" ng-model="tr.user.admin" />
    <form-input model="tr.user.admin"></form-input>
</div>

结果html有value="true"，这使得Angluar看起来像是一个文本框。如果我将{{ type }}替换为checkbox，那么它就可以了。指令和输出中的输入都设置正确。

我还发现我是否将指令html更改为

<form-input model="tr.user.admin" type="checkbox"></form-input>

并且指令js中的scope对象为

scope:
  model: '='
  type:  '@'

并从其有效的链接功能中删除scope.type = "checkbox"！

所以看起来像Angluar正在设置输入元素的值，并且正在调用ng-model BEFORE链接。这有意义吗？

我认为这个解决方案目前还不错，但我真的希望能够从js中指定输入类型。

顺便说一句，如果type是text，我原来的方式就可以了。

更新：这是JSFiddle，显示了我在说什么。 form-input不起作用。 form-input2确实使用了html中指令的type属性。

UPDATE2：我希望能够做的是在javascript中指定输入类型并使控制器的绑定工作。

Answer 1

您尝试做的事情无法完成。关于原因的简短答案是：Internet Explorer不支持它，因此有角度也不能（Boo！）。你可能不得不接受这样的事情：

template: '<input ng-show="model" ng-model="model" type="checkbox"/>' + 
          '<input ng-show="!model" ng-model="model" type="text"/>';

参考：change type of input field with jQuery

AngularJS指令绑定输入

1 个答案: