$scope is not defined custom property editor - Using Umbraco 7

Jason Espin 368 posts 1335 karma points

Sep 25, 2014 @ 10:48

$scope is not defined - Custom Property Editor

Using Umbraco 7

Hi all,

I have written my own custom property editor in Umbraco 7.1.6 which is essentially a text area field with a character limit. The aim is to allow a developer to specify a limit on a field in the back end so that content editors are notified as to how many characters they have remaining and if they go over that limit the content is trimmed.

I have successfully added the field to my data types but for some reason the Javascript does not appear to fire and the property editor just behaves like a normal textarea with no update to signify that the user has entered any text and notification to symbolise that they have entered over 200 characters.

Does anyone know what I might be doing wrong? Most of the code is from my Umbraco level 2 certification course so it could be that the code is fundamentally wrong but here goes:

Package.Manifest

{
    "propertyEditors": [
        {
            "alias": "characterlimit",
            "name": "Character Limit",
            "editor": {
                "view": "~/App_Plugins/CharacterLimit/characterlimit.html"
            },
            "prevalues": {
                "fields": [
                    {
                        "label": "Character limit",
                        "description": "Enter the maximum number of characters",
                        "key": "limit",
                        "view": "number"
                    }
                ]
            }
        }
    ],
    "javascript": [
        "~/App_Plugins/CharacterLimit/characterlimit.controller.js" 
    ]
}

characterlimit.controller.js

angular.module("umbraco").controller("characterLimitController", function ($scope, notificationsService) {
    $scope.limitChars = function () {

        var limit = parseInt($scope.model.config.limit);
        if ($scope.model.value.length > limit) {

            $scope.info = "You cannot write more than " + limit + " characters!";
            notificationsService.remove(0);
            notificationsService.error($scope.info);
            $scope.model.value = $scope.model.value.substr(0, limit);

        } else {

            $scope.info = (limit - $scope.model.value.length) + " characters remaining.";

        }
    };
});

characterlimit.html

<div ng-controller="characterLimitController">
<textarea ng-model="model.value" ng-change="limitChars()"></textarea>
<br/>
<span ng-bind="info"></span>
</div>

All of the above files have been added into their own folder called 'CharacterLimit' which is stored in the 'App_Plugins' folder in my Visual Studio project. Any help would be greatly appreciated.

N.B. I've checked for Javascript errros in the page and this suggests that $scope is not defined. This would explain why the Javascript is not firing but why is $scope undefined?

Flag this post as spam?

$scope is not defined - Custom Property Editor