在ajax中動態添加Angular的內容

我在基於AngularJS的網站上有一個頁面，內容通過ajax被加載到div中。我的問題是，加載的內容和控制器中的Angular指令似乎被忽略。我如何讓控制器工作？在ajax中動態添加Angular的內容

HMTL：

<a href="javascript:void(0)" id="loadContent">Load Content</a> 

<div id="myForm-con"> 
</div> 

<script src="js/angular.min.js"></script> 
<script src="js/app.js"></script> 
<script type="text/javascript"> 
    $('#loadContent').on('click', function() { 
    $.post("load-my-form.php", function(data, result) { 
     $('#myForm-con').html(data); 
    });  
    }); 
</script>

app.js

(function() { 
    var app = angular.module('app', []); 

    app.controller('validationCtrl', ['$scope', 
     function ($scope) { 
      $scope.submitForm = function() { 
       $scope.submitted = true; 

       if ($scope.myForm.$valid) { 
        alert('form is valid'); 
       } 
      } 
     } 
    ]); 
})();

HTML AJAX加載形式

<div ng-controller="validationCtrl"> 
    <form id="my-form" name="myForm" ng-submit="submitForm()" novalidate> 
    ... 
    </form> 
</div>

來源

2016-03-03 Max

在Angular應用程序中停止使用jQuery AJAX。 Angular有用於創建請求的'$ http'模塊。 – tymeJV

我可能會嘗試somethi納克這樣的：

HTML

<a href="#" id="loadContent" ng-click="loadContent()">Load Content</a>

角

$scope.loadContent() = $http.post("load-my-form.php", data).then(function (result) { 
    $('#myForm-con').html(result); 
});

或可替代

角

$scope.formResults = ''; 
$scope.loadContent() = $http.post("load-my-form.php", data).then(function (result) { 
    $scope.formResults = result; 
});

HTML

<div id="myForm-con">{{formResults}}</div>

來源

2016-03-03 14:45:00

爲了這個工作，你必須做兩件事情：

1 - 使用角度http和.then爲callback -

$http.post('/someUrl', data, config).then(successCallback, errorCallback);

2-使用角data-binding將您的數據鏈接到視圖，例如 - 2-ways data-binding。

來源

2016-03-03 14:56:22

在ajax中動態添加Angular的內容

回答

相關問題