AngularJS Directive binding input

Question

When having a variable input type checkbox the value is not set correctly.

This code is simplified in order to get the problem across.

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>

The resultant html has value="true" which makes it seem that Angluar is seeing it as a textbox. If I replace {{ type }} with checkbox then it works. Both the input in the directive and out are set correctly.

I also found out if I change the directive html to be

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

and the scope object in the directive js to be

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

and remove the scope.type = "checkbox" from the link function it works!

So it is seeming like Angluar is setting the value of the input element with ng-model BEFORE link is being called. Does that make sense?

I suppose this solution is good enough for now but I would REALLY like to be able to specify the input type from the js.

By the way, the way I had it originally works fine if type is text.

UPDATE: Here is a JSFiddle that shows what I am talking about. form-input doesn't work. form-input2 does but using the type attribute on the directive in the html.

UPDATE2: What I want to be able to do is specify the input type in the javascript and have the binding to the controller work.

Not really sure what you are asking. Can you clarify what the specific question is? — charlietfl, Mar 04 '15 at 00:09
The question is "How do I get this working the way I want it?" — Adam Keenan, Mar 04 '15 at 00:11
But `the way I want it` is part of what isn't clear. A simple explanation of the desired behavior is missing — charlietfl, Mar 04 '15 at 00:12

score 1 · Accepted Answer · edited May 23 '17 at 10:09

1

What you're attempting to do can't be done. The short answer as to why is: Internet Explorer doesn't support it, so angular can't either (Boo!). You might have to settle for something like this:

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

Reference: change type of input field with jQuery

edited May 23 '17 at 10:09

Community

1
1

answered Mar 04 '15 at 00:43

HankScorpio

3,509
13
26

I took a look at this in a JSFiddle here http://jsfiddle.net/adamk33n3r/u0tq72c4/. It doesn't seem to work, though. – Adam Keenan Mar 04 '15 at 00:51
I just discovered what this is doing. You are having the first check box toggle the type of the second one. This is not what I was asking. – Adam Keenan Mar 04 '15 at 00:52
That's just for demonstration purposes. The point is that changing some boolean is changing the type of the input element. That's what you need. If that's not why you have that other checkbox there, then what's it supposed to do? – HankScorpio Mar 04 '15 at 00:59
You can change it in response to another user input (as in this example) or by whatever means you want. Just remove the $watch if you don't want it and set $scope.type based on your own criteria. – HankScorpio Mar 04 '15 at 01:01
The other checkbox was to demonstrate data binding occurring. So that no matter which you check the other one will also be checked. The issue it not whether or not the html says it is a checkbox but whether or not Angular sees that it is at binding time. I can effectively change the type but Angular still sees it as a textbox. You can tell this by inspecting the second checkbox here (http://jsfiddle.net/u0tq72c4/2/) and toggling the first. A value attr is being set which is what a textbox would need happen and not a checkbox. I'm sorry for the confusion. – Adam Keenan Mar 04 '15 at 01:57
Oh ok, the problem is clearer now that i see the fiddle. What you're attempting to do can't be done. The short answer as to why is: Internet Explorer doesn't support it, so angular can't either (Boo!). You might have to settle for something like this: template: ''' – HankScorpio Mar 04 '15 at 02:37
Alright....stupid IE....oh well. Thank you so much for your help! I don't think I should accept your answer as it is since it doesn't answer the question but if you put what you said in your comment as an edit into your answer I will accept it. Thanks again. – Adam Keenan Mar 04 '15 at 02:55
That's fair. Will do. – HankScorpio Mar 04 '15 at 02:56
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/72208/discussion-between-adamk33n3r-and-hankscorpio). – Adam Keenan Mar 04 '15 at 07:24
I actually had to use ng-show. ng-if had a little bug in it. No biggy though. – Adam Keenan Mar 04 '15 at 07:39
What's the bug? Perhaps I should update the code above? – HankScorpio Mar 04 '15 at 17:37
I actually don't know. What happened was the checkbox was bound until I clicked it...like if I clicked the first checkbox that wasn't made from the directive it would change the one made with the directive. But once I clicked on the second, it like detached it and the first one didn't change it anymore. You can see what I'm describing here: http://jsfiddle.net/u0tq72c4/3/ – Adam Keenan Mar 04 '15 at 20:28
Oh, that is interesting. I found an explanation for that here, as well as a solution (ng-show is probably fine for most cases anyway): http://stackoverflow.com/questions/18342917/angularjs-ng-model-doesnt-work-inside-ng-if – HankScorpio Mar 04 '15 at 20:32
Very interesting. Didn't even think of it creating a new scope. Makes sense though. Thank you. – Adam Keenan Mar 04 '15 at 20:38

AngularJS Directive binding input

1 Answers1