这是问题

Question

好吧所以我创建了一个非硬编码的聊天窗口小部件，而不是它是由服务创建的，例如：

$chatWidget.setParent(parent).setUser(user).setMessages(messages).build();

以下是 $ chatWidget 服务的构建功能：

var build = function () {
        if (parentElement && myUser && myMessages) {
            parentElement.append('<re-chat></re-chat>');
        }
    }

以下是chat指令的简化版本：

    angular
    .module('app')
    .directive('reChat', function ($chatWidget) {
        return {
            restrict: 'E',
            replace: true,
            template: 

    '<div id="chat-widget-container"><div id="chat-widget-header">reUser.name</div>'+
    '<div id="chat-widget-body"<div ng-repeat="message in reMessages"><div>' +
    '<p> {{message.body}} </p></div></div></div>' +
      '<textarea ng-model="messageToSend" id="message-to-send" placeholder ="Type your message" rows="3"></textarea>' +
      '<button class="btn btn-default">Send</button></div>',
            scope: {
                reMessages: '=',
                reParent: '<',
                reUser: '<'
            },
            link: function (scope, element, attrs) {    
            scope.reUser = $chatWidget.getMyUser();
            scope.reMessages = $chatWidget.getMyMessages();
            scope.reParent = $chatWidget.getParent();
        };
    });

这是问题

我的重新聊天指令出现在DOM结构中，但其内部html完全为空。

我尝试了几种方法，包括删除模板并执行此操作：

var html = '[TEMPLATE HERE]' 
element.html(html);
$compile(element.contents())(scope);

或：

var html = '[TEMPLATE HERE]';
element.replaceWith(html);

两者都无济于事。所以，如何让我的指令的html显示???

修改

如果我像下面那样对其进行硬编码，则小部件显示正常：

<re-chat re-messages="messages" re-my-user="user"></re-chat>

但这不是我想要的行为。我希望动态添加指令。

Answer 1

尝试更改指令以使用共享范围并删除链接功能。

然后在服务build()方法中创建一个新的子范围。将指令的数据附加到新的子范围。然后使用子范围编译new指令并将其附加到DOM。

var build = function () {
    if (parentElement && myUser && myMessages) {
        var childScope = scope.$new(); //pass true here if you want to
                                       //inherit parent scope properties.
        childScope.reMessages = myMessages;
        parentElement.append($compile('<re-chat></re-chat>')(childScope));
    }
}

为什么我的动态创建元素不显示？

这是问题

修改

1 个答案: