I am currently loading Partial View returned by MVC controller to a model
dialog via AngularJS $http.get call. My View in rendered properly in modal
dialog, but the only problem is that my partial view which is rendered also
uses angular expressions etc. and for some reason angular is not working in
my partial view, but if i load this partial view in some other view without
ajax call then it angular works properly.
*Partial View Code: ~/Views/ArticleType/_Add*
*MVC Controller: ArticleTypeController*
@{
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 to load modal with the 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
});
}
}]);
*common.js *
$(document).ready(function (e) {
$(document).ajaxStart(function (e) {
$("#loadingBar").modal('show');
});
$(document).ajaxStop(function(e) {
$("#loadingBar").modal('hide');
});
$(document).ajaxComplete(function (e) {
$("#loadingBar").modal('hide');
});
$(document).ajaxError(function (e) {
$("#loadingBar").modal('hide');
});
});
function ShowModal(content) {
//var html = $complie(content)(scope);
$("#modal .modal-dialog").html(content);
$("#modal").modal("show");
}
function HideModal() {
$("#modal .modal-dialog").html("");
$("#modal").modal("hide");
}
As you can see from the image below that angular expression is not being
evaluated. [image: As you can see from the image below that angular
expression is not being evaluated.]
Any help would be really appreciated. Just so that you know, angular
expressions etc. are working in normal views.
Here is the download link to the solution files.
: https://app.box.com/s/rxvrhwcdp75zo736k7u5
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
