I'm trying to figure out how I can present a bootstrap modal dialog from my Angular controller. Basically what I have is a table. When the user clicks on a table row I want to present a modal dialog that contains details about the selected row.
我想知道如何从我的角度控制器中呈现一个引导模式对话框。基本上我有一张桌子。当用户单击表行时,我要呈现一个包含所选行的细节的模态对话框。
The way I'm thinking about approaching this is have each table row respond to an ng-click. The ng-click will call a function in the controller and this function will present the modal dialog as well as pass it the data it needs to display.
我想到的方法是让每个表行响应一个ng-click。ng-click将调用控制器中的一个函数,该函数将显示模态对话框,并将需要显示的数据传递给它。
I know how to display a modal dialog from the view itself, but I'm not sure how I can trigger the modal from the controller. Any ideas?
我知道如何从视图本身显示模态对话框,但我不知道如何从控制器触发模态。什么好主意吗?
The controller, for the view, has the following function which will be called when the user selects a row to view a modal dialog.
对于视图,控制器具有以下函数,当用户选择一行来查看一个模态对话框时将调用该函数。
$scope.rowClicked = function(rowID){
$scope.dataForModal = Data.get(rowID, function(err,data){
//Here is where I'd like to display the modal dialog in the view
});
}
1 个解决方案
#1
3
See http://angular-ui.github.io/bootstrap/#/modal
看到http://angular-ui.github.io/bootstrap/ /模态
Use a ng-click="showDetails(item)"
on the cell/row in your view. Then use this code in your controller to show the Modal:
在视图的单元格/行上使用ng-click=“showDetails(项目)”。然后在控制器中使用此代码显示模态:
$scope.showDetails = function (item) {
var modalInstance = $modal.open({
templateUrl: 'yourview.html',
controller: 'DetailModalController',
resolve: {
item: function () {
return item;
},
}
});
modalInstance.result.then(function (item) {
// ok
}, function () {
// dismiss
});
};
Your modal controller can be something like this:
你的模态控制器可以是这样的:
angular.module('app').controller('DetailModalController', [
'$scope', '$modalInstance', 'item',
function ($scope, $modalInstance, item) {
$scope.item = item;
$scope.dismiss = function () {
$modalInstance.dismiss();
};
$scope.close = function () {
$modalInstance.close($scope.item);
};
};
}]);
With $modalInstance.close($scope.item);
you can pass an object. With $modalInstance.dismiss();
you dismiss the modal without an object.
modalInstance.close美元($ scope.item);您可以传递一个对象。美元modalInstance.dismiss();没有对象的模态消去。
#1
3
See http://angular-ui.github.io/bootstrap/#/modal
看到http://angular-ui.github.io/bootstrap/ /模态
Use a ng-click="showDetails(item)"
on the cell/row in your view. Then use this code in your controller to show the Modal:
在视图的单元格/行上使用ng-click=“showDetails(项目)”。然后在控制器中使用此代码显示模态:
$scope.showDetails = function (item) {
var modalInstance = $modal.open({
templateUrl: 'yourview.html',
controller: 'DetailModalController',
resolve: {
item: function () {
return item;
},
}
});
modalInstance.result.then(function (item) {
// ok
}, function () {
// dismiss
});
};
Your modal controller can be something like this:
你的模态控制器可以是这样的:
angular.module('app').controller('DetailModalController', [
'$scope', '$modalInstance', 'item',
function ($scope, $modalInstance, item) {
$scope.item = item;
$scope.dismiss = function () {
$modalInstance.dismiss();
};
$scope.close = function () {
$modalInstance.close($scope.item);
};
};
}]);
With $modalInstance.close($scope.item);
you can pass an object. With $modalInstance.dismiss();
you dismiss the modal without an object.
modalInstance.close美元($ scope.item);您可以传递一个对象。美元modalInstance.dismiss();没有对象的模态消去。