首页 > 解决方案 > angularjs 指令到 angular6

问题描述

我在 HTML 中有如下 angular js 指令

 <div>
    <body-compile compile="message.body" scope="{}" tosca-id="message-{{ $index }}-body-content"></body-compile>
 </div>

& 在 .js 文件中我有如下:

define(function (require, exports, module) {
    'use strict';

    var base = require('base');
    var utils = base.utils;

    configCompile.$inject = ['$compileProvider'];
    module.exports = configCompile;

    function configCompile($compileProvider) {

        $compileProvider.directive('bodyCompile', bodyCompile);

function bodyCompile($compile) {
            // directive factory creates a link function
            return {
                scope: {
                    compile: "=",
                    scope: "=?",
                },
                link: link,
            }

            function link(scope, element, attrs) {
                var scope_child = scope.$new();

                scope.$watch('compile', function () {

                        element.empty().append(scope.compile);
                        $compile(element.contents())(scope_child);
                    }
                );

                scope.$watch('scope', function () {
                        scope.scope = scope.scope || {};
                        scope_child = scope.$new();
                        for (var idx in scope.scope) {
                            scope_child[idx] = scope.scope[idx];
                        }
                        scope_child.$this = scope.scope;

                        element.empty().append(scope.compile);
                        $compile(element.contents())(scope_child);
                    }
                );

            };
        };
    }

此功能用于显示现有覆盖(多于一个)和创建新消息,因此通常 message.body 可以包含一条或多条消息。

由于我对 angularJS 了解不多,我想知道用 angular 6 指令替换它的最佳方法是什么,我是否必须使用带有两个 @Input 参数的指令,如 scope ?身体 ?。

如果有人可以对此给出提示会有所帮助。

谢谢

标签: angular

解决方案


推荐阅读