在angularJS的控制器中綁定數據

Question

我已經在我的 angularjs 的控制器函數中動態創建了 div 元素，所以在 div 元素中想要綁定數據但它沒有綁定它顯示文本原樣。

我的代碼是：

function botCtrl($scope,$rootScope,$state,$window,$http)
{
    $scope.messageContent = '';

    //console.log("ID ::", $state.params.chat_state_id );
    $scope.submit = function(){
        console.log("Message ::", $scope.message);

        $scope.messageToShow = $scope.message;
        var newEle = angular.element("  <div class='message' ><a class='message-author' ng-model='author'> You </a>\
            <span class='message-content' ng-model='messageContent'>{{messageToShow}}\
        </span> </div>");
        var target = document.getElementById('messageDiv');
        angular.element(target).append(newEle);

        var data = {
            id: "775525ad-3c95-4ff4-aac7-5260466fc146",
            message: $scope.message
        }
            $scope.messageContent = $scope.message;
            $scope.value = 1;
            var url = "/api/chatBot/chatBot";
            $http.post(url,data)
                .success(function(data){
                    $scope.messageToShow = data.messageText;
                    console.log("Message ::", $scope.messageToShow);
                    var newEle = angular.element("<div class='message' ><a class='message-author' ng-model='author'> Bot </a>\
                    <span class='message-content' ng-model='messageContent'>{{messagetoShow}}\
                </span> </div>");
                var target = document.getElementById('messageDiv');
                angular.element(target).append(newEle);
                }) .error(function(){
                    console.log("ERROR in bot controller");
                })

    }


}

它在兩種情況下都創建了 div 元素，但是兩種情況下 div 內的數據都來了 {{messageToShow}} 它沒有綁定數據。

所以我哪里做錯了。

謝謝

Answer 1

我找到了解決方案。

代碼：

function botCtrl($scope,$rootScope,$state,$window,$http) {
    $scope.messageContent = '';

    //console.log("ID ::", $state.params.chat_state_id );
    $scope.submit = function() {
        console.log("Message ::", $scope.message);

        $scope.messageToShow = $scope.message;
        var newEle = angular.element("  <div class='message' ><a class='message-author' ng-model='author'> You </a>\
            <span class='message-content' ng-model='messageContent'>"+$scope.messageToShow+"\
        </span> </div>");
        var target = document.getElementById('messageDiv');
        angular.element(target).append(newEle);

        var data = {
            id: "775525ad-3c95-4ff4-aac7-5260466fc146",
            message: $scope.message
        }
            $scope.messageContent = $scope.message;
            $scope.value = 1;
            var url = "/api/chatBot/chatBot";
            $http.post(url,data)
                .success(function(data) {
                    $scope.messageToShow = data.messageText;
                    console.log("Message ::", $scope.messageToShow);
                    var newEle = angular.element("<div class='message' ><a class='message-author' ng-model='author'> Bot </a>\
                    <span class='message-content' ng-model='messageContent'>"+$scope.messageToShow+"\
                </span> </div>");
                var target = document.getElementById('messageDiv');
                angular.element(target).append(newEle);
                $scope.message = "";
                }) .error(function(){
                    console.log("ERROR in bot controller");
                })                
    } 
}