问题描述
限时送ChatGPT账号..我有一个视图,其中包含一个调用 PartialView 的链接.
<a href="#" data-ng-click=callPartialView()">单击此处查看详细信息.</a><脚本>app.controller('MainController', ['$scope', 'HttpService',功能($范围,HttpService){$scope.callPartialView = function() {HttpService.getModal('/Controller/ShowModalMethod', {});};}]);
我的 HttpService 服务有一个函数,它从控制器调用一个动作并返回一个 PartialView 以显示它.
getModal = function(url, params) {$http.get(url, params).then(function(result) {$('.modal').html(result);});}
PartialView 显示完美.当我尝试向 PartialView 内容添加控制器时会出现问题.
<span data-ng-bind="description"></span><脚本>alert('此警报已显示.');app.controller('PartialViewController', ['$scope', 'HttpService',功能($范围,HttpService){$scope.description = "这是上面绑定中必须出现的内容,但它不能正常工作.";}]);
控制器无法按预期工作.我放在控制器中的 None 出现在上面的那个 div 中.发生了什么?谢谢大家!
解决方案停止使用 jQuery...
问题在于 $('.modal').html(result);
只是将 HTML 添加到具有 .modal
类的内容中.您需要做的是使用 AngularJS 编译模板,例如:
app.factory('HttpService', function($document, $compile, $rootScope, $templateCache, $http) {var body = $document.find('body');返回 {getModal:函数(网址,数据){//使用传递数据的模态的新范围var scope = $rootScope.$new();angular.extend(范围,数据);//缓存模板以备将来调用var template = $http.get(url, {cache: $templateCache}).then(功能(响应){//用一些额外的标记包装模板var modal = angular.element(['','<div class="bg"></div>','','<a href="#" class="icon cross"></a>',''+ response.data + '</div>','</div>','</div>'].加入(''));//重要的部分$compile(modal)(scope);//将模态添加到主体body.append(modal);//关闭方法scope.close = 函数 () {modal.remove();范围.销毁();};});}};});
工作示例
http://jsfiddle/coma/6j66U/
I have a View which contains a link to call a 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>
My HttpService service has a function that calls an action from the controller and returns a PartialView in order to show it.
getModal = function(url, params) {
$http.get(url, params).then(function(result) {
$('.modal').html(result);
});
}
The PartialView is showing perfectly. The problem occurs when I try to add a controller to that PartialView content.
<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>
The controller just don't work as expected. None I put inside the controller appears in that div above. What's happening? Thank you all!
解决方案Stop using jQuery...
The problem is that $('.modal').html(result);
is only adding the HTML to something with a .modal
class. What you need to do is to compile the template using AngularJS, something like:
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();
};
});
}
};
});
Working example
http://jsfiddle/coma/6j66U/
这篇关于PartialView 中的 angularjs 控制器不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论