我有一个View,其中包含一个调用PartialView的链接。
<div data-ng-controller="MainController">
<a href="#" data-ng-click=callPartialView()">
Click here to see the details.
</a>
</div>
<script>
app.controller('MainController', ['$scope', 'HttpService',
function($scope, HttpService) {
$scope.callPartialView = function() {
HttpService.getModal('/Controller/ShowModalMethod', {});
};
}]);
</script>
我的HttpService服务有一个函数,它从控制器调用一个动作并返回一个PartialView以显示它。
getModal = function(url, params) {
$http.get(url, params).then(function(result) {
$('.modal').html(result);
});
}
PartialView完美呈现。当我尝试将控制器添加到该PartialView内容时,会出现问题。
<div class="wrapper" data-ng-controller="PartialViewController">
<span data-ng-bind="description"></span>
</div>
<script>
alert('This alert is shown.');
app.controller('PartialViewController', ['$scope', 'HttpService',
function($scope, HttpService) {
$scope.description = "That's the content must have to appear in that bind above, but it isn't working properly.";
}]);
</script>
控制器根本没有按预期工作。没有我放在控制器里面出现在上面的div中。发生了什么?谢谢大家!
答案 0 :(得分:2)
停止使用jQuery ...
问题是$('.modal').html(result);
只是将HTML添加到.modal
类的内容中。您需要做的是使用AngularJS编译模板,例如:
app.factory('HttpService', function($document, $compile, $rootScope, $templateCache, $http) {
var body = $document.find('body');
return {
getModal: function (url, data) {
// A new scope for the modal using the passed data
var scope = $rootScope.$new();
angular.extend(scope, data);
// Caching the template for future calls
var template = $http.get(url, {cache: $templateCache})
.then(function (response) {
// Wrapping the template with some extra markup
var modal = angular.element([
'<div class="modal">',
'<div class="bg"></div>',
'<div class="win">',
'<a href="#" class="icon cross"></a>',
'<div>' + response.data + '</div>',
'</div>',
'</div>'
].join(''));
// The important part
$compile(modal)(scope);
// Adding the modal to the body
body.append(modal);
// A close method
scope.close = function () {
modal.remove();
scope.destroy();
};
});
}
};
});
工作示例