如何使用 AngularJS 进行模态
how to have to modal with angularjs
我试过这个 plunker
http://plnkr.co/edit/s902hdUIjKJo0h6u6k0l?p=preview
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
但它给出了一个错误 错误: [$injector:unpr] 未知提供程序: 项目提供程序 <- 项目
我想有两个带有 2 种不同模式的按钮
有很多语法错误:更新了普伦克 http://plnkr.co/edit/vgM5PLyVgluOeikGvVSA?p=preview
在 JS:- 中所做的更改:-
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl2', function ($scope, $modal, $log) {
$scope.items2 = ['item12', 'item22', 'item32'];
$scope.open = function (size) {
var modalInstance2 = $modal.open({
templateUrl: 'myModalContent2.html',
controller: 'ModalInstanceCtrl2',
size: size,
resolve: {
items2: function () {
return $scope.items2;
}
}
});
modalInstance2.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl2', function ($scope, $modalInstance, items2) {
$scope.items2 = items2;
$scope.selected = {
item: $scope.items2[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item2);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
您可以尝试我的Angular Dialog Service,它建立在ui.bootstrap的模态之上,但为错误,通知,进度,确认和自定义对话框提供了预制模态。 它允许您使用"dialogsProvider"在应用程序的配置功能中设置配置,因此您不必每次都设置键盘和背景设置。 还支持使用角度翻译和fontAwesome。
你可以在这里找到它: https://github.com/m-e-conroy/angular-dialog-service或在 bower.io 上。
相关文章:
- 打开一个模态并将其链接到AngularJS中的指令
- 如何通过所选索引(AngularJS)在模态弹出窗口中显示数据
- 点击AngularJS模态窗口捕捉背景事件
- 在angularJS中使用模态窗口时,在控制器之间共享对象数组
- Angularjs - 观察模态窗口从另一个控制器关闭
- 通过AngularJS中的模态编辑对象-使用临时对象
- angularJS,一个部分或模态通知,加载几秒钟后就会消失
- 使用角度模态服务(AngularJS)自定义模态
- 如何在angularjs-ui-bootstrap中使用模态弹出窗口
- angularjs模态将数据传输到外部控制器的正确方法
- angularjs ng repeat不会在模态框中循环
- AngularJS bootstrap.ui模态未显示
- 如何在AngularJS点击事件中将数据传递到模态中
- AngularJS:将变量传递给模态
- 无法再次获得 Popup 的模态 - AngularJS
- 如何使用 AngularJS 进行模态
- 从模态 AngularJS 获取数据
- AngularJS ng-click:如何将行数据传递到模态弹出文本框
- AngularJS 引导模态结果而不关闭
- 创建一个模态窗口以使用 AngularJS 加载数据