在AngularJS的1.3和2版中创建指令作用域的方式是一样的

Is the way of creating a directive scope the same in versions 1.3 and 2 of AngularJS?

本文关键字:方式 一样 作用域 创建 AngularJS 2版 指令      更新时间:2023-09-26

我有以下指令,我的应用程序正在使用。我的印象是,我的应用程序在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);

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

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

在jqLite下,find函数只支持通过标签名搜索,id将不起作用。你可以使用以下技巧从(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'
}

允许你为指令定义一个独立的作用域,并与声明该指令的作用域绑定。'='用于双向数据绑定。字符串和函数的其他选项是'@和&'。https://docs.angularjs.org/guide/directive