javascript - ngvalue - ng-bind-html angularjs

Angularjs: Cómo pasar la función a compilar

Question

Tengo la siguiente directiva:

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();
        }
    }
}]);

Dentro tengo la función showDiv y hideDiv que mostraría y ocultaría el menú del editor de la página cuando hago clic dentro y fuera del área de texto.

Paso las funciones a un evento dentro de la compilación:

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

Cuando hago clic dentro y fuera de textarea obtengo los errores:

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

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

Cuando hago clic dentro y fuera de textarea, no ocurre nada. No hay errores, pero tampoco se llama a la función.

¿Alguien puede indicarme la dirección correcta? Gracias

Answer 1

En lugar de utilizar el mismo ámbito, instanciar un nuevo ámbito ( scope.$new() ) y asignar las funciones a este nuevo ámbito. De lo contrario, anulará las referencias de función asignadas por la declaración de ámbito al objeto de ámbito.

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

Y para usar las referencias de funciones dadas al alcance original (de la directiva) puede llamarlas en las funciones de nuevos ámbitos (por ejemplo, function() { scope.hideDiv(); } ).

Plnkr de trabajo:

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

Answer 2

Gracias chicos por intentar ayudar. He encontrado lo que estaba mal con mi código. Hice un error muy tonto / novato. Usé on-focus lugar del ng-focus y on-blur lugar de ng-blur .