CODEWITHSUNDEEP
angularjsangularjs-scope
vzhen
vzhen

Reputation: 11157

Where to place angular element so it can effected all scopes

I have this code which is a contenteditable placeholder by CraigStuntz.

My question is where should I put this code so all the div which contain contenteditable will get effected.

I tried to put under app.controller('myCtrl', function(){}); but it only works with the direct scope. No nested scope is working.

angular.element(document.querySelectorAll('div[contenteditable]')).bind('change keydown keypress input', function() {
    if (this.textContent) {
        this.setAttribute('data-contenteditable-placeholder', 'true');
    }
    else {
        this.removeAttribute('data-contenteditable-placeholder');
    }
});

Upvotes: 1

Views: 123

Answers (2)

Zack Argyle
Zack Argyle

Reputation: 8407

Try using a directive like this.

angular.module('angularProject.directives', [])
.directive('placeholder', function() {
    return {
        restrict:'A',
        link: function(elem) {
            elem.bind('change keydown keypress input', function() {
                elem.setAttribute('data-contenteditable-placeholder', 'true');
            });
        }
    }
});

You can then place it in any of your divs like this.

<div placeholder></div>

I haven't tested this.

Upvotes: 4

JQuery Guru
JQuery Guru

Reputation: 6963

I suggest you can create a directive for this task

Upvotes: 1

Related Questions