I am trying to convert an old data type to umbraco 7. The data type consists of 2 inputs, depending on a configuration value the text of one of these inputs will be surrounded by span tags to format it differently on the front end.
I have the property editor set up and working however I am a little stuck on how to edit the saved value to surround it by span tags but remove them when it's loaded back in to the input for editing.
(I still have to add the configuration stuff in, right now I'm just trying to get the UI working as I need)
This removes the span tags when displaying the values in the inputs but how do I add them when saving. Or is there a better way of doing this. This is my first property editor so I'm trying to learn angular whilst learning how it works in umbraco while trying to actually create something that is needed on the website.
One way I would think to do it is create a custom angular directive for your input fields, and have it "require" ngModel in it's definition. This would result in an NgModelController being passed into your link function. The NgModelController controls all aspects of the directives models and allows you to manage a separate $viewValue and $modelValue so would allow you to have a view value with no spans, but a model value with spans.
It's a bit of a complex thing to explain fully as I'm not sure how much angular you know, but I'd suggest looking into the following:
Declearing / using your own directives (http://www.sitepoint.com/practical-guide-angularjs-directives/)
Reviewing the docs on NgModelController for what it's capable of (https://docs.angularjs.org/api/ng/type/ngModel.NgModelController)
Look at some examples of directives that require ngModel and how they have manage the view / model values (http://davidchin.me/blog/angularjs-directives-for-modifying-ngmodel-values)
Sorry if this is a bit vague, but it hopefully gives you a few areas to look into.
Angular is another of those things that's on my to learn list at the moment, not used it other than a dashboard and editing a couple of property editors in Umbraco 7 :/
I'll have a look at those links and see if I can work it out though. I managed to bodge together something that works but it's something I'll hopefully be able to revisit and improve.
Creating property editor, when to alter value
I am trying to convert an old data type to umbraco 7. The data type consists of 2 inputs, depending on a configuration value the text of one of these inputs will be surrounded by span tags to format it differently on the front end.
I have the property editor set up and working however I am a little stuck on how to edit the saved value to surround it by span tags but remove them when it's loaded back in to the input for editing.
This is my view and controller code.
angular.module("umbraco").controller("BCG.HeadingTextbox", function ($scope) { if ($scope.model.value !== null && $scope.model.value !== undefined) { $scope.leftVal = $scope.model.value.left.replace("", "").replace("", ""); $scope.rightVal = $scope.model.value.right.replace("", "").replace("", ""); } });(I still have to add the configuration stuff in, right now I'm just trying to get the UI working as I need)
This removes the span tags when displaying the values in the inputs but how do I add them when saving. Or is there a better way of doing this. This is my first property editor so I'm trying to learn angular whilst learning how it works in umbraco while trying to actually create something that is needed on the website.
Hi suzyb,
One way I would think to do it is create a custom angular directive for your input fields, and have it "require" ngModel in it's definition. This would result in an NgModelController being passed into your link function. The NgModelController controls all aspects of the directives models and allows you to manage a separate $viewValue and $modelValue so would allow you to have a view value with no spans, but a model value with spans.
It's a bit of a complex thing to explain fully as I'm not sure how much angular you know, but I'd suggest looking into the following:
Sorry if this is a bit vague, but it hopefully gives you a few areas to look into.
Hope it helps
Matt
Angular is another of those things that's on my to learn list at the moment, not used it other than a dashboard and editing a couple of property editors in Umbraco 7 :/
I'll have a look at those links and see if I can work it out though. I managed to bodge together something that works but it's something I'll hopefully be able to revisit and improve.
is working on a reply...