Patrik Gustafsson Patrik Gustafsson - 1 month ago 14
AngularJS Question

How do I add a string from a package I created to the frontpage in Umbraco?

I have created a property editor and I have set up a document to show the propery, like this:

Backoffice

I still can not figure out how to display the text to the frontpage. I manage to display the other property, called box, that I added to the document

Here is how my controller looks:

angular.module("umbraco").controller("mytext",
function ($scope) {
// do code here
});


Here is how my mytext.html looks:

<div ng-controller="mytext" class="mytext">
<h2>Hellooooooo!</h2>
<!--<input type="text" ng-model="model.value" />
ng-model="model.value" />-->
<div class="display"><h2>Hellooooooo!</h2></div>
</div>


And this is how my template looks:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.MyHelooo>
@using ContentModels = Umbraco.Web.PublishedContentModels;
@{
Layout = "Master.cshtml";
}
@CurrentPage.Name
@CurrentPage.Hejhej
@CurrentPage.box
<p>All your bases</p>


Finally this is how my package.manifest looks:

{
"propertyEditors": [
{
"alias": "MyText",
"name": "My text",
"hideLabel": false,
"valueType": "JSON",
"editor": {
"view": "~/App_Plugins/MyText/mytext.html"
}
}
],
"javascript": [
"~/App_Plugins/MyText/mytext.controller.js"
],
"css":[
"~/App_Plugins/MyText/mytext.css"
]
}


EDIT:
I used Joniff answer to make a controller like this:

angular.module("umbraco").controller("mytext",
function ($scope) {
$scope.value = 'Helloooooooooooo!';
});


To make it work I had to clear the cache of my browser with CTRL+SHIFT+DELETE.
I also had to make sure that I ran Visual Studio in debugging mode, minor things but frustrating when you don't know what is wrong.

Answer

From the exact code published, you have commented out the code that would actual set model.value in mytext.html to a value. This does need to be set to something, otherwise, your new property type has no value to output on the front end.

If you want to hardcode your property to always display 'Helloooooooooooo!' what about

angular.module("umbraco").controller("mytext",
function ($scope) {
    $scope.value = 'Helloooooooooooo!';
});

or

<div ng-controller="mytext" class="mytext" ng-init="model.value='Hellooooooo'">
  <h2>Hellooooooo!</h2>
  <div class="display"><h2>Hellooooooo!</h2></div> 
</div>

though, why not have the model.value editable using an input control, like

<div ng-controller="mytext" class="mytext">
  <input type="text" ng-model="model.value" />
</div>

Ultimately, I'm not sure what you are trying to achieve, as the code you have posted is doing the same job as a label, which A) Already exists in Umbraco as a property type and B) has no input or output just like your version of it.