AngularJS in ASP.NET MVC Partial View
I am currently loading the Partial View returned by the MVC controller into the bootstrap model via AngularJS's $ http.get call. My view is rendering in a modal dialog, but the only problem is that my partial view that is being displayed is also using angular, and for some reason angular is not working in my partial view, but if I convert the same partial view to normal it works correctly.
Partial View Code:
@{
ViewBag.Title = "Add Article Types";
}
//other scripts files e.g app.js and angular.js are included in main layout file.
<script src="~/Scripts/Angular/ArticleTypeController.js"></script>
<div class="modal-content" ng-controller="ArticleTypeController">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">Γ</button>
Add New Article Type
</div>
<form novalidate role="form" name="ArticleTypeForm" ng-submit="ArticleTypeForm.$valid && Add(model)">
<div class="modal-body">
<div class="form-group">
<label for="ArticleType" class="control-label">Article Type</label>
<input type="text" required ng-model="model.ArticleTypeName" class="form-control" id="ArticleType" />
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" value="Add" >Add</button>
{{ArticleTypeForm.$valid}}
</div>
</div>
Controller for loading a modal partial view.
MenuController.js
angular.module('myApp').controller('MenuController', [
'$scope', '$http', 'httpPreConfig', function ($scope, $http, httpPreConfig) {
$scope.AddArticleType = function () {
$.get("/ArticleType/Add")//returns the partial view.
.success(function (response) {
ShowModal(response);//it properly shows the modal. but angular doesn't work
});
}
}]);
As you can see from the image below, angular expression is not evaluated.
Any help would be really appreciated. Just so you know, angular expressions, etc. They work in normal views.
source to share
Perhaps the view you are returning is not Angular compiled. Try compiling it before displaying it modally by the service $compile
and binding to the correct scope:
$scope.AddArticleType = function () {
$.get("/ArticleType/Add")
.success(function (response) {
$compile(response)($scope);
ShowModal(response);
});
}
But in reality it is not like in the Angular world. IMO it would be better to use it ng-include
to load the content inside the modal and then show it to the user.
source to share