$scope is not defined custom property editor - Using Umbraco 7 - our.umbraco.com

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Jason Espin 368 posts 1335 karma points

Sep 25, 2014 @ 10:48

Jason Espin

$scope is not defined - Custom Property Editor

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?

Maff 141 posts 466 karma points

Sep 25, 2014 @ 13:30

Hi Jason,

You're not injecting the scope into your controller correctly - try this:

angular.module("umbraco").controller("characterLimitController", ['$scope', 'notificationService', 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.";

        }
    };
}]);

Check out this tutorial for more info:

http://viralpatel.net/blogs/angularjs-controller-tutorial/

Cheers,

Maff

Jason Espin 368 posts 1335 karma points

Oct 01, 2014 @ 11:12

0

Hi Maff,

Thanks for this. I'll give it a try later. Unfortunately this means all of the documentation I was given on this during the Umbraco Level 2 certification course appears to be incorrect if your solution is the correct method of doing things.

Cheers,

Jason

Copy Link
Maff 141 posts 466 karma points

Oct 01, 2014 @ 11:16

0

No worries - let me know how you get on.

Cheers,

Maff

Copy Link
Dave Woestenborghs 3504 posts 12134 karma points MVP 9x admin c-trib

Oct 01, 2014 @ 11:24

0

Can you check in if the javascript file is loaded.You can do this in chrome developer tools on the network tab.

Make sure you set debug to true in your web.config. So the client dependency framework doens't minify and combine your scripts

Dave

Copy Link

Jason Espin 368 posts 1335 karma points

Oct 01, 2014 @ 11:28

Jason Espin

Well I've included the code from Maff's example and now my field isn't appearing at all. Can you confirm whether or not is should be 'notificationService' or 'notificationServices' as there appears to be a mishmash of both in the code above.

I'm also getting the following error now in Firebug:

Error: Circular dependency: 
c@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:27:37
d@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:27:241
g/<.instantiate@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:28:432
Jc/this.$get</<@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:53:322
k/<@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:44:243
n@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:7:51
k@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:44:136
e@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:40:1
y/<@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:39:202
Od</<.compile/</</<@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:158:14
u/j.success/<@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:100:347
Uc/e/j.promise.then/i@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:79:421
Uc/e/j.promise.then/i@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:79:421
Uc/e/j.promise.then/i@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:79:421
Uc/e/j.promise.then/i@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:79:421
Uc/g/<.then/<@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:80:475
Xc/this.$get</e.prototype.$eval@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:92:261
Xc/this.$get</e.prototype.$digest@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:90:140
Xc/this.$get</e.prototype.$apply@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:92:429
j@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:101:67
r@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:104:449
dd/</v.onreadystatechange@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:106:90

http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js
Line 63

Dave Woestenborghs 3504 posts 12134 karma points MVP 9x admin c-trib

Oct 01, 2014 @ 11:38

1

You need to use notificationsService with the double s.

Also your first code for the controller should be correct.

Also Tim from HQ has a blog about a char limit editor : http://www.nibble.be/?p=285

Maybe that can be a starting point

Copy Link
Jason Espin 368 posts 1335 karma points

Oct 01, 2014 @ 11:46

0

That's the one I copied word for word after finding my documentation from the level 2 course was incorrect however I would really like it to work with the notification service for a more integrated feel.

Copy Link

Jason Espin 368 posts 1335 karma points

Oct 01, 2014 @ 11:52

Jason Espin

Okay, I've given that a go using 'notificationsService' and my control now displays. For some reason however it no longer restricts the amount of characters and allows the user to type more than 200 characters (although the countdown works) and also the notifications service is not working I was expecting it to flag up an error either when the character limit hit 200 or when I attempted to save more than this. After inspecting in Firebug, I'm now getting the following error:

Error: notificationsService is not defined
$scope.limitChars@http://localhost:49439/App_Plugins/CharLimit/charlimit.controller.js:11:8
Rc/s/<@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:74:81
Xc/this.$get</e.prototype.$eval@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:92:261
zd<.link/<@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:152:449
xd</this.$setViewValue/<@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:151:480
n@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:6:468
xd</this.$setViewValue@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:151:436
Va/i/<@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:120:174
Xc/this.$get</e.prototype.$eval@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:92:261
Xc/this.$get</e.prototype.$apply@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:92:374
Va/i@http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js:120:136
x.event.dispatch@http://localhost:49439/umbraco/lib/jquery/jquery-2.0.3.min.js:10:11716
x.event.add/y.handle@http://localhost:49439/umbraco/lib/jquery/jquery-2.0.3.min.js:10:7816

http://localhost:49439/umbraco/lib/angular/1.1.5/angular.min.js
Line 63

Dave Woestenborghs 3504 posts 12134 karma points MVP 9x admin c-trib

Oct 01, 2014 @ 12:00

0

Can you post the code you have now ? So I can try to pinpoint the problem.

Dave

Copy Link

Jason Espin 368 posts 1335 karma points

Oct 02, 2014 @ 10:15

Jason Espin

Certainly:

//charlimit.controller.js

angular.module('umbraco')
    .controller('charlimitcontroller',
    ['$scope', 'notificationsService',
    function ($scope) {
         $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 left.';
            }
         };
    }]);



//charlimit.html

<div ng-controller="charlimitcontroller">
    <span ng-if="model.config.limit >= 100">
        <textarea ng-model="model.value" ng-change="limitChars()" rows="10" class="umb-editor umb-textarea textstring"></textarea>
    </span>
    <span ng-if="model.config.limit < 100">
        <input ng-model="model.value" ng-change="limitChars()" type="text" class="umb-editor umb-textstring textstring" />
    </span>
    <br/>
    <span ng-bind="info"></span>
</div>


//package.manifest

{
    propertyEditors: [
        {
            alias: "charlimit",
            name: "Char limit",
            editor: {
                view: "~/App_Plugins/CharLimit/charlimit.html"
            },
            prevalues: {
                fields: [
                    {
                        label: "Character Limit",
                        description: "Enter the maximum number of characters allowed",
                        key: "limit",
                        view: "requiredfield",
                        validation: [
                            {
                                type: "Required"
                            }
                        ]
                    }
                ]
            }
        }
    ],
    javascript: [
        '~/App_Plugins/CharLimit/charlimit.controller.js'
    ]
}

Dave Woestenborghs 3504 posts 12134 karma points MVP 9x admin c-trib

Oct 02, 2014 @ 10:25

Dave Woestenborghs

Found the problem. It is in your controller. This works for me :

angular.module('umbraco')
    .controller('charlimitcontroller',

    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 left.';
            }
         };
    });

Jason Espin 368 posts 1335 karma points

Oct 02, 2014 @ 17:45

0

I'm afraid this is what I've tried before and unfortunately it doesn't work.

Copy Link
Antoinette Silago 21 posts 92 karma points notactivated

Dec 06, 2016 @ 16:52

0

I tried too, still doesn't work for me too. Did you try anything else?

Copy Link
Dave Woestenborghs 3504 posts 12134 karma points MVP 9x admin c-trib

Oct 02, 2014 @ 17:54

0

Strange...that exact code works at my end.

Some tips for debugging this.

Set the debug attribute to true on the compilation tag in your web.config. This will stop the client dependency from minifying and combining scripts.

Open the chrome developer tools and disable cache on the network tab. This way you are sure the latest version of your scripts is loaded.

If you get errors in the console please share them.

Dave

Copy Link
is working on a reply...

Please Sign in or register to post replies

Write your reply to:

Editor

Preview

Draft