Для привязки данных в контроллере angularJS

Question

Я динамически создал элемент div в функции контроллера моего angularjs, поэтому в элементе 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");
                })                
    } 
}