Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 7x admin c-trib
    Oct 27, 2015 @ 11:27
    Chriztian Steinmeier
    0

    Property Editor binding using hidden input field?

    Developing Umbraco 7 packages
    Umbraco 7

    Hi all,

    I'm fiddling with a custom property editor and I'm using a component that monitors a <textarea> (or similar) for changes, and then updates a hidden <input> field (guess it's similar to what a Markdown editor or an RTE does?).

    So I'm assuming the <input> is the ng-model here; only - it's not persisted...

    Starting out, my view is just this:

    <div ng-controller="MyController">
    <custom-tag input="tagcontent"></custom-tag>
    <input id="tagcontent" type="hidden" ng-model="model.value" />
</div>

    Shouldn't this populate the <input>'s value attribute with any saved value when the editor is instantiated?

    Or does the ng-model binding not work for hidden input fields?

    /Chriztian

    Copy Link

  • Comment author was deleted

    Oct 27, 2015 @ 11:30

    What happens when you chance the type to text?

    Copy Link

  • Comment author was deleted

    Oct 27, 2015 @ 11:31

    Check the thread here http://stackoverflow.com/questions/18446359/angularjs-does-not-send-hidden-field-value

    You cannot use double binding with hidden field. The solution is to use brackets :

    <input type="hidden" name="someData" value="{{model.value}}" />
    Copy Link
  • Ravi Motha 290 posts 500 karma points MVP 7x c-trib
    Oct 27, 2015 @ 11:40
    Ravi Motha
    0

    So the ng-model is not rebinding when the value is actually updated.. can you see the model.value being changed using the console.log???

    Copy Link
  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 7x admin c-trib
    Oct 27, 2015 @ 11:49
    Chriztian Steinmeier
    0

    @Tim: It's already TEXT, actually. StackOverflow topic makes sense - will try the curly-brackets (though I seem to remember having tried that, but probably not correctly).

    Thanks, /Chriztian

    Copy Link

  • Comment author was deleted

    Oct 27, 2015 @ 12:03

    hmm with type text it should just work with ng-model, any js errors ?

    Copy Link

  • Comment author was deleted

    Oct 27, 2015 @ 12:08

    what happens if in your view you just add

    <input id="tagcontent" type="text" ng-model="model.value" />

    So no controller just the input

    Copy Link
  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 7x admin c-trib
    Oct 27, 2015 @ 12:11
    Chriztian Steinmeier
    0

    Oh - misunderstood the initial question about setting type to text - thought you meant the valueType: key in the manifest file :-)

    Will try changing the input to text...

    Copy Link
  • Bjarne Fyrstenborg 1281 posts 3991 karma points MVP 7x c-trib
    Oct 27, 2015 @ 12:17
    Bjarne Fyrstenborg
    0

    Hi Chriztian

    I think you should be able to use ng-value attribute since AngularJS 1.2 http://stackoverflow.com/questions/18446359/angularjs-does-not-send-hidden-field-value

    Does this work?

    <input id="tagcontent" type="hidden" ng-value="model.value" />

    or maybe try this for watching changes: http://blog.sapiensworks.com/post/2013/06/22/Binding-AngularJs-Model-to-Hidden-Fields.aspx/

    /Bjarne

    Copy Link
  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 7x admin c-trib
    Oct 27, 2015 @ 12:31
    Chriztian Steinmeier
    0

    Hmm doesn't even work with the standard textfield...

    It's not saving the property (can see that using XMLDump) - so for what it's worth, the binding on initialisation could actually be working - it's just getting an empty property :-)

    /Chriztian

    Copy Link

  • Comment author was deleted

    Oct 27, 2015 @ 12:45

    @CHriztian, did you try the basic text field example (so no controller)

    Copy Link
  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 7x admin c-trib
    Oct 27, 2015 @ 12:49
    Chriztian Steinmeier
    0

    Yes - that saves the value...

    So what does that tell you?

    /Chriztian

    Copy Link

  • Comment author was deleted

    Oct 27, 2015 @ 12:56

    That there is probably an issue with your controller

    Copy Link
  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 7x admin c-trib
    Oct 27, 2015 @ 13:04
    Chriztian Steinmeier
    0

    OK, so I've got it down to this:

    • If I change the textfield manually and hit Save and Publish, it saves correctly.
    • If the value is set from script, it doesn't Save, i.e. Angular doesn't see the changes

    So looks like I'll need to checkout using the $watch() as Bjarne suggests...

    Will try the hidden input with ng-value first, since that should work ... (btw: Very confusing that there are all these subtly different approaches - using ng-model, ng-value or the value with double-braces)

    I say should work because I don't see how you'd change the value of a hidden field from other than code...

    Copy Link

  • Comment author was deleted

    Oct 27, 2015 @ 13:06

    So from script you are setting the value attribute? Why not set $scope.model.value instead , since that is linked to your control it should do the binding for you...

    Copy Link
  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 7x admin c-trib
    Oct 27, 2015 @ 13:08
    Chriztian Steinmeier
    0

    Why not set $scope.model.value instead [?]

    Because that's the component doing it for me :)

    Copy Link

  • Comment author was deleted

    Oct 27, 2015 @ 13:07

    If you share the complete example I can give some pointers since I think you aren't taking full advantage of the angularjs power ;)

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft