Hello I am migrating angularjs applicaion to angular 6 application, wherein I have in left side list of conversations: and each conversation has message(s) could be single or n number of messages. Now problem is that this functionality is working in angular js application and they have built in directive for that.
In HTML template they are using like this
<div class="message-content">
<div>
<message-compile compile="message.body" scope="{}" tosca-id="message-{{ $index }}-body-content"></message-compile >
</div>
</div>
So this directive is design to do like if any new message is coming up it will append new message to the existing message of selected conversation from left side of the list.
Below is the code for angularJS directive.
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('messageCompile', messageCompile)
function messageCompile($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.html(scope.compile);
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.html(scope.compile);
element.empty().append(scope.compile);
$compile(element.contents())(scope_child);
}
);
};
};
}
})
if someone can give me hint on how to do this stuff using angular6 would be highly helpful. I know using observable or something which has inbuilt in angular 6 would be pointer.