如何从控制器打开和设置控制器 Mobile-Angular 模态
how to open and set controller Mobile-Angular modal from controller
我正在尝试在模态(移动 Angular JS)中使用,但我还没有找到在我的主控制器中为我的模态设置控制器并传递参数的任何方法。我的应用程序只是移动应用程序,使用 ui- bootstrap ?
是错误的
Html
<div ui-content-for="title">
<span>Employerss</span>
</div>
<div class="scrollable" ui-state="searchBar">
<div class="scrollable-content" ui-scroll-bottom='bottomReached()'>
<div class="list-group" style="height:80px;">
<a ng-repeat="employers in employerss" ng-click="select(employers)" class="list-group-item">
<p>{{employers.name | limitTo:70}}...</p>
</a>
</div>
</div>
</div>
<div ui-content-for="modals">
<div ng-include="'modal/modalemployers.html'" ng-controller="modalEmployersController"></div>
</div>
模态
<div class="modal" ui-if='modalemployers' ui-state='modalemployers'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="modalemployers">
×
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>{{test}}</p>
</div>
<div class="modal-footer">
<button ui-turn-off="modalemployers" class="btn btn-default">Close</button>
<button ui-turn-off="modalemployers" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Angular JS
var app = angular.module('apphome', [
"ngRoute",
"ngTouch",
"mobile-angular-ui",
"mobile-angular-ui.core",
"mobile-angular-ui.components"
]);
.........
.........
app.controller('employersController', function ($scope, $http) {
$scope.employerss = [];
$scope.select = function (item) {
$scope.Ui.turnOn('modalemployers');
}
getEmployers($http, function return(data) {
$scope.employers = data;
});
});
app.controller('modalEmployersController', function ($scope) {
$scope.test = "teste";
});
我需要(我很困惑是否可以使用 bootstrap -ui ,而不会危及我的应用程序,因为它只是移动的。我需要知道 bootstrap -ui会很好用。小屏幕手机使用应用程序不能破坏布局。)
$scope.select = function (item) {
var modalInstance = $modal.open({
templateUrl: 'modalemployers.html',
controller: 'modalEmployersController',
size: size,
resolve: {
item: function () {
return item;
}
}
});
}
谢谢大家!
Angular UI Bootstrap 只为 Bootstrap CSS 提供 Angular 模板和扩展。由于 Bootstrap CSS 支持移动设备,因此 Angular UI Bootstrap 库也支持。
请注意 Angular UI Bootstrap 的唯一依赖项是 Angular >= 1.3.x 和 Bootstrap CSS >= 3.x.
我正在尝试在模态(移动 Angular JS)中使用,但我还没有找到在我的主控制器中为我的模态设置控制器并传递参数的任何方法。我的应用程序只是移动应用程序,使用 ui- bootstrap ?
是错误的Html
<div ui-content-for="title">
<span>Employerss</span>
</div>
<div class="scrollable" ui-state="searchBar">
<div class="scrollable-content" ui-scroll-bottom='bottomReached()'>
<div class="list-group" style="height:80px;">
<a ng-repeat="employers in employerss" ng-click="select(employers)" class="list-group-item">
<p>{{employers.name | limitTo:70}}...</p>
</a>
</div>
</div>
</div>
<div ui-content-for="modals">
<div ng-include="'modal/modalemployers.html'" ng-controller="modalEmployersController"></div>
</div>
模态
<div class="modal" ui-if='modalemployers' ui-state='modalemployers'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="modalemployers">
×
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>{{test}}</p>
</div>
<div class="modal-footer">
<button ui-turn-off="modalemployers" class="btn btn-default">Close</button>
<button ui-turn-off="modalemployers" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Angular JS
var app = angular.module('apphome', [
"ngRoute",
"ngTouch",
"mobile-angular-ui",
"mobile-angular-ui.core",
"mobile-angular-ui.components"
]);
.........
.........
app.controller('employersController', function ($scope, $http) {
$scope.employerss = [];
$scope.select = function (item) {
$scope.Ui.turnOn('modalemployers');
}
getEmployers($http, function return(data) {
$scope.employers = data;
});
});
app.controller('modalEmployersController', function ($scope) {
$scope.test = "teste";
});
我需要(我很困惑是否可以使用 bootstrap -ui ,而不会危及我的应用程序,因为它只是移动的。我需要知道 bootstrap -ui会很好用。小屏幕手机使用应用程序不能破坏布局。)
$scope.select = function (item) {
var modalInstance = $modal.open({
templateUrl: 'modalemployers.html',
controller: 'modalEmployersController',
size: size,
resolve: {
item: function () {
return item;
}
}
});
}
谢谢大家!
Angular UI Bootstrap 只为 Bootstrap CSS 提供 Angular 模板和扩展。由于 Bootstrap CSS 支持移动设备,因此 Angular UI Bootstrap 库也支持。
请注意 Angular UI Bootstrap 的唯一依赖项是 Angular >= 1.3.x 和 Bootstrap CSS >= 3.x.