javascript - AngularJS 1.3 和 2 版本中创建指令作用域的方式是否相同？

Question

我的应用程序正在使用以下指令。我的印象是我的应用程序在 AngularJS 1.3 上运行良好，但经过很多更改，包括迁移到最新版本、删除 jQuery 以及使用 controller as 然后现在这个指令给了我错误:

app.directive('pagedownAdmin', 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 {
        require: 'ngModel',
        replace: true,
        scope: {
            modal: '=modal'
        },
        template: '<div class="pagedown-bootstrap-editor"></div>',
        link: function (scope, iElement, attrs, ngModel) {

            var editorUniqueId;

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

            var newElement = $compile(
                '<div>' +
                    '<div class="wmd-panel">' +
                        '<div data-ng-hide="modal.wmdPreview == true" id="wmd-button-bar-' + editorUniqueId + '"></div>' +
                            '<textarea data-ng-hide="modal.wmdPreview == true" class="wmd-input" id="wmd-input-' + editorUniqueId + '">' +
                            '</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.html(newElement);

            var help = function () {
                alert("There is no help");
            }

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

            var $wmdInput = iElement.find('#wmd-input-' + editorUniqueId);

            var init = false;

            editor.hooks.chain("onPreviewRefresh", function () {
                var val = $wmdInput.val();
                if (init && val !== ngModel.$modelValue) {
                    $timeout(function () {
                        scope.$apply(function () {
                            ngModel.$setViewValue(val);
                            ngModel.$render();
                        });
                    });
                }
            });

            ngModel.$formatters.push(function (value) {
                init = true;
                $wmdInput.val(value);
                // editor.refreshPreview();
                return value;
            });

            editor.run();
        }
    }
});

有人可以向我解释一下以下内容在做什么吗:

    scope: {
        modal: '=modal'
    },

还有

    )(scope);

这是我调用该指令的方式:

   <textarea id="modal-data-text"
      class="pagedown-admin wmd-preview-46"
      data-modal="modal"
      data-pagedown-admin
      ng-model="home.modal.data.text"
      ng-required="true"></textarea>

如果有人能看到任何在 2 中可能不起作用的内容，那么我将非常感谢一些帮助。特别是以下代码似乎返回 null:

var $wmdInput = iElement.find('#wmd-input-' + editorUniqueId);

Answer 1

您放弃了 jQuery，因此您的代码现在依赖于 jQLite。使用 jqLit​​e 时，元素对象的函数支持较少的功能。请参阅文档中的完整详细信息: https://docs.angularjs.org/api/ng/function/angular.element

var $wmdInput = iElement.find('#wmd-input-' + editorUniqueId);

在jqLit​​e下，find功能仅支持按标签名称搜索，ids不起作用。您可以使用 ( AngularJS: How to .find using jqLite? ) 中的以下技巧

// find('#id')
angular.element(document.querySelector('#wmd-input-' + editorUniqueId))

$compile 是一项编译模板并将其链接到范围的服务。 https://docs.angularjs.org/api/ng/service/ $编译

scope: {
    modal: '=modal'
}

允许您为指令定义一个独立的范围，并与声明该指令的范围进行一些绑定(bind)。 '=' 用于双向数据绑定(bind)。其他选项包括用于字符串和函数的“@”和“&”。 https://docs.angularjs.org/guide/directive