在一个函数中的模态不能从另一个函数中访问
问题描述:
我对Angular很陌生,我试图让AngularJS模态工作。当我点击按钮时,它显示正常,但模式内的取消按钮不起作用。在一个函数中的模态不能从另一个函数中访问
myApp.controller("ServiceController", function($scope, $http, $modal) {
var modalInstance;
$scope.select = function(id) {
this.modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ServiceController',
});
console.log(this.modalInstance);
};
$scope.cancel = function() {
console.log(this.modalInstance); <--- this is null
this.modalInstance.dismiss('cancel');
};
});
由于modalInstance变量为null,所以在Cancel函数中发生错误。
任何人都可以请解释为什么这是null,即使select方法明确地指定一个模态实例。
这是HTML代码如下所示:
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">update this line</h3>
</div>
<div class="modal-body">
<input class="form-control" ng-model="client.name"/>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Update</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
感谢
答
该方法建议对角自举网站是使用一个单独的控制器为您的模态。这有助于模块化您的代码,并将不同的功能分开。试试这个:
myApp.controller("ServiceController", function($scope, $http, $modal) {
$scope.select = function(id) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'modalController',
});
console.log(modalInstance);
};
});
myApp.controller('modalController', function ($scope, $modalInstance, items) {
$scope.cancel = function() {
console.log(modalInstance);
$modalInstance.dismiss('cancel');
};
});
当抛出错误时'this'的值是什么? –
@ WillReese'this'包含一个'modalInstance:Object' – donga