AngularJS：如何将函数传递到编译中

Question

我有以下指令：

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

我在内部定义了showDiv和hideDiv函数，用于在单击文本区域时显示和隐藏页面编辑菜单。

我将这些函数传递给编译中的一个事件：

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

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

当我在文本框内外单击时，会出现错误：

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

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

当我点击文本框进入和退出时，没有任何反应。没有错误也没有调用函数。

有人能指点我正确的方向吗？谢谢。

- user2678324

---

请使用ng-focus和ng-blur分别代替onfocus和onblur。 - Samir Das

不要使用“new”作为变量名，它是一个特殊的关键字，不能用作变量。 - michelem

@Michelem，变量名“new”仅用于此问题的目的 :) - user2678324

你应该在问题中进行更正。顺便说一下，完整的指令代码或者一个JSFiddle可能有助于找到解决方案。 - michelem

我没有看到任何与您的指令绑定的"pagedownAdmin"元素 - 您的指令是在什么时候使用的呢？ - Maen

Answer 1

不要使用相同的作用域，而是实例化一个新的作用域 (scope.$new()) 并将函数分配给这个新作用域。否则，您将覆盖由作用域声明分配给作用域对象的函数引用。

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

要使用指令原始作用域中提供的函数引用，您可以在新作用域的函数中调用这些引用（例如 function() { scope.hideDiv(); }）。

工作示例：

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

- Jonathan

Answer 2

感谢大家的帮助。我已经找到了代码的问题所在。我犯了一个非常愚蠢/初学者的错误。我使用了on-focus而不是ng-focus，以及on-blur而不是ng-blur。

- user2678324

---

你可以将这个作为问题的编辑添加进去，如果@Rouby已经回答了你的问题，请将其标记为答案。 - camden_kid