Question

我想要做的是当我点击一些带有这样的绑定功能的按钮时，它将为私人聊天窗口目的创建整个DOM元素结构

$scope.openPrivateChatWindow = function () {
    //here i want to do some coding to create whole div structure
}

使用jQuery我会做这样的事情

function openPrivateChatWindow() {
    var div = '<div id="' + ctrId + '" class="ui-widget-content draggable" rel="0">' +
          <div class="header">' +
               '<div  style="float:right;">' +
                    '<img id="imgDelete"  style="cursor:pointer;" src="/Images/delete.png"/>' +
                        '</div>' +
                        '<span class="selText" rel="0">' + userName + '</span>' +
                        '<span class="selText" id="msgTypeingName" rel="0"></span>' + 
                '</div>' +
                    '<div id="divMessage" class="messageArea">' +
                    '</div>' +
                    '<div class="buttonBar">' +
                        '<input id="txtPrivateMessage" class="msgText" type="text"   />' +
                        '<input id="btnSendMessage" class="submitButton button" type="button" value="Send"   />' +
          '</div>' +
                    '<div id="scrollLength"></div>' +
   '</div>';
}

有什么我可以使用angular来实现这一点，如果是的话，最好的方法是什么，例如，如果我可以为此加载一些html模板或者像我在这里用jQuery显示的那样做

Answer 1

您不应该从控制器内部向DOM添加html节点。使用自定义指令或使用ng-if隐藏div并使其显示在按钮单击上。

$scope.isChatHidden = true;
$scope.openPrivateChatWindow = function () {
    $scope.isChatHidden = false;
}


<div ng:if="isChatHidden">
     Other DOM Elements
</div>

如何使用角度

1 个答案: