Angularjs: How to pass function into compile

Question

I have the following directive:

app.directive('pagedownAdmin', ['$compile', '$timeout', function ($compile, $timeout) {
    var nextId = 0;
    var converter = Markdown.getSanitizingConverter();
    converter.hooks.chain("preBlockGamut", function (text, rbg) {
        return text.replace(/^ {0,3}""" *\n((?:.*?\n)+?) {0,3}""" *$/gm, function (whole, inner) {
            return "<blockquote>" + rbg(inner) + "</blockquote>\n";
        });
    });

    return {
        restrict: "E",
        scope: {
            content: "=",
            modal: '=modal'
        },
        template: '<div class="pagedown-bootstrap-editor"></div>',
        link: function (scope, iElement, attrs) {

            var editorUniqueId;

            if (attrs.id == null) {
                editorUniqueId = nextId++;
            } else {
                editorUniqueId = attrs.id;
            }

            scope.hideDiv = function () {
                document.getElementById("wmd-button-bar-" + editorUniqueId).style.display = 'none';
            };

            scope.showDiv = function () {
                document.getElementById("wmd-button-bar-" + editorUniqueId).style.display = 'block';
            };

            scope;

            var newElement = $compile(
                '<div>' +
                    '<div class="wmd-panel">' +
                        '<div data-ng-hide="modal.wmdPreview == true" id="wmd-button-bar-' + editorUniqueId + '" style="display:none;"></div>' +
                            '<textarea on-focus="showDiv()" on-blur="hideDiv()" data-ng-hide="modal.wmdPreview == true" class="wmd-input" id="wmd-input-' + editorUniqueId + '" ng-model="content" >' +
                            '</textarea>' +
                        '</div>' +
                    '<div data-ng-show="modal.wmdPreview == true" id="wmd-preview-' + editorUniqueId + '" class="pagedownPreview wmd-panel wmd-preview">test div</div>' +
                '</div>')(scope)
            ;

            iElement.append(newElement);

            var help = angular.isFunction(scope.help) ? scope.help : function () {
                // redirect to the guide by default
                $window.open("http://daringfireball.net/projects/markdown/syntax", "_blank");
            };

            var editor = new Markdown.Editor(converter, "-" + editorUniqueId, {
                handler: help
            });

            var editorElement = angular.element(document.getElementById("wmd-input-" + editorUniqueId));

            editor.hooks.chain("onPreviewRefresh", function () {
                // wire up changes caused by user interaction with the pagedown controls
                // and do within $apply
                $timeout(function () {
                    scope.content = editorElement.val();
                });
            });

            editor.run();
        }
    }
}]);

Inside I have the showDiv and hideDiv function that would show and hide the page editor's menu when I click in and out of the textarea.

I am passing the functions to an event inside the compile:

//First try
<textarea onfocus="showDiv()" onblur="hideDiv()"></textarea>

When I click inside and outside the textarea I get the errors:

Uncaught ReferenceError: on is not defined
Uncaught ReferenceError: off is not defined

//Second try
<textarea on-focus="showDiv()" on-blur="hideDiv()"></textarea>

When I click in and out of textarea nothing is happening. No errors but not calling the function either.

Can anyone point me to the right direction? Thanks

Use ng-focus and ng-blur instead of onfocus and onblur respectively — Samir Das
– Samir Das, Commented Jul 4, 2015 at 7:25
Don't use newas variable name, it's a special one you can't use as var — michelem
– michelem, Commented Jul 4, 2015 at 7:26
@Michelem the var name 'new' is just for this question purposes :) — user2678324
– user2678324, Commented Jul 4, 2015 at 7:29
You should correct it in the question. BTW probably the full directive code or better a JSFiddle could help to find a solution. — michelem
– michelem, Commented Jul 4, 2015 at 7:32
I don't see any pagedownAdmin element binded to your directive - when do you use your directive exactly? — Maen
– Maen, Commented Jul 6, 2015 at 11:17

Jonathan · Accepted Answer · 2015-07-06 11:31:58Z

11

+125

Instead of using the same scope, instantiate a new scope (scope.$new()) and assign the functions to this new scope. Because otherwise you will override the function-references assigned by the scope-declaration to the scope-object.

var newScope = scope.$new();
newScope.hideDiv = function() {...};
newScope.showDiv = function() {...};
...
var newElement = $compile(...)(newScope);

And to use the function-references given to the original scope (of the directive) you can call those in the new-scopes functions (e.g. function() { scope.hideDiv(); }).

Working plnkr:

http://plnkr.co/edit/nGux3DOsrcPBcmz43p2A?p=preview

https://docs.angularjs.org/api/ng/service/$compile https://code.angularjs.org/1.3.16/docs/api/ng/type/$rootScope.Scope#$new

answered Jul 6, 2015 at 11:31

Jonathan

3,6543 gold badges23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user2678324 · Accepted Answer · 2015-07-06 14:03:46Z

2

Thank you guys for trying to help. I have found what was wrong with my code. I did a very silly/noob mistake. I used on-focus instead of ng-focus and on-blur instead of ng-blur.

answered Jul 6, 2015 at 14:03

user2678324

1 Comment

camden_kid Over a year ago

You may want to add this as an edit to your question and if @Rouby has answered your question mark that as the answer.

Collectives™ on Stack Overflow

Angularjs: How to pass function into compile

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related