how to open and set controller Mobile-Angular modal from controller

Question

I'm trying to use in modal (Mobile Angular JS ), but I have not found , any way of setting controller for my modal inside my main controller , and pass parameters. My application is just mobile , it would be wrong to use 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>

Modal

<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">
                    &times;
                </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";
        });

I Need (I am confused if I can use bootstrap -ui , without jeopardizing my application because it is just mobile. I need to know if the bootstrap -ui will work well . Mobile phones with small screen will use the application can not break the layout.)

$scope.select = function (item) {
  var modalInstance = $modal.open({
      templateUrl: 'modalemployers.html',
      controller: 'modalEmployersController',
      size: size,
      resolve: {
        item: function () {
          return item;
        }
      }
    });

            }

Thanks all!

score 0 · Accepted Answer · answered Oct 06 '15 at 20:08

Angular UI Bootstrap just provides Angular templates and extensions for Bootstrap CSS. Since Bootstrap CSS supports mobile devices, the Angular UI Bootstrap library does as well.

Note that the only dependencies of Angular UI Bootstrap are Angular >= 1.3.x and Bootstrap CSS >= 3.x.

how to open and set controller Mobile-Angular modal from controller

1 Answers1