angular - 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 ?身体 ?。
如果有人可以对此给出提示会有所帮助。
谢谢
解决方案
推荐阅读
- elasticsearch - 如何在弹性搜索 NEST 函数中应用过滤器核心函数
- python - 使用独特的图形句柄 Python 创建子图
- python - PYTHON - BEAUTIFULSOUP 如何将空 TD(表数据)作为空值而不是跳过它
- background - SwiftUI 工作表模式背景不适用于 edgeIgnoreSafeArea(.all) - 为什么?
- android - 如何在android(7.0+,不是root)上使用libusb?libusb_init() 总是返回 -1;
- json.net - 将元 $id 反序列化为 ID 属性
- elasticsearch - 弹性搜索 - 基于属性的加权
- java - Java 中的日期验证失败
- python - Ensemble Stacking 方法 - ValueError:必须提供填充值
- scala - 如何从特征的上下文中访问案例类的参数