How to Implement tab navigation swipe using Mobile angular UI like whts app tabs

I want to implement a swipable tab based on the Mobile-Angular-UI. What I want to accomplish is to be able to swipe on the tabs, if the user wants to change to another one. So if a user swiped where it says "Tab #2" they would be able to move to TAB3 without having to actually click TAB3.

Plnkr : `

'http://plnkr.co/edit/c4EXHa0C8jjPIRT6e6sN?p=preview'

`

Modals do not show up after grunt build in a yeoman app

I have got an angular project generated with yeoman/generator-angular with both mobile and desktop views. The mobile templates heavily rely on mobile-angular-ui and it works just fine in development.

For some reason the modals are not displayed after grunt build. Instead, calling a modal would act as if a transparent component was added on top of the page (I mean, with the highest z-index), stealing the focus in the same way that a modal would do. As a consequence, the modal itself is not displayed and the page does not respond to any click event (assuming the fake modal is locking the focus).

The content of my modals is loaded via ng-include directives and it seems to work (from what I can see in the network tool of Chrome). There are no error message complaining about a missing resource in the console and the only thing I can think of is that the code responsible for toggling the modals visibility in mobile-angular-ui was somehow impacted by the build process. Sounds possible?

Any idea of what could cause this difference of behaviour between dev and production?

I am using mobile-angular-ui 1.2.0-beta.11. Feel free to request more information.

Does mobile angular ui work on ios and windows platforms

I have been working on mobile angular ui using cordova for android apps, but i want to know whether mobile anugular ui will work on ios and windows mobiles and if not, any solution

IBM MobileFirst Platform and Mobile Angular UI

I have created an MFP project with the MFP CLI

After creating the project, I ran "yo mobileangularui" in the project root to install Mobile Angular UI

This scaffolds out a Mobile Angular UI project with AngularJS and Gulp

I am minifying all the js and css files, including the MFP javascript files and putting them in the MFP common folder with gulp

Everything loads fine when I view it in the MFP console, but not on localhost.

My problem is that the sidebars do not work when I click on them. I am not getting any errors. I log a message console.log when I click the menu button and it comes through fine, but it doesn't open the side bar.

If I build this project with out MFP everything works fine.

Not sure whats going on as everything with MFP seems to load fine in the console.

Some images:
https://drive.google.com/file/d/0B48-zmJJTxrYamgtcEtiNi1OMmc/view?usp=sharing https://drive.google.com/file/d/0B48-zmJJTxrYeG1NUHNpbHA0ZUE/view?usp=sharing

Angularjs Navigation routeProvider and phonegap on windows phone 8 Not working

We have developed a simple test app on using angular js and mobile-ui-angular. You can find the source here:

https://github.com/lnesitwo/html_5_template

So far the app works correctly on IOS, BB and AOS however on windows phone 8, the navigation does not work.

We are using phonehap serve functionality to send the app to the phonegap developer app installed on the phone.

The strange part is. On the app load the url that get called is: x-wampp0:/wwww/content_sync/downloads/phonegapdevapp/wwww/index.html With this url the mainController gets to run but the template does not get loaded.

However if you refresh the app once is started for the fisrt time the app loads with this URL x-wampp0:/wwww/content_sync/downloads/phonegapdevapp/wwww/index.html#/home And the home template loads correctly but the navigation does not work.

And in addition if you reload the app but inside one of the pages the app load on x-wampp0:/wwww/content_sync/downloads/phonegapdevapp/wwww/index.html#/page1 And the page template loads correctly and the navigation between pages 1 and 2 works but not back to home when you click on the app name in the main menu.

<div class="sidebar sidebar-left"> 
  <div class="scrollable">
    <h1 class="scrollable-header app-name"><a class="main_title_sidebar" ng-rel='nofollow' href="#/home">Two Mobile App</a></h1>  
    <div class="scrollable-content">
      <div class="list-group" ui-turn-off='uiSidebarLeft'>
        <a class="list-group-item" ng-rel='nofollow' href="#/page1">Page 1<i class="fa fa-chevron-right pull-right"></i></a> 
        <a class="list-group-item" ng-rel='nofollow' href="#/page2">Page 2 <i class="fa fa-chevron-right pull-right"></i></a>
      </div>
    </div>
  </div>
</div>

Has you can see the ng-href is being use for navigation and is a simple 3 page template base application.

I have investigated and tried this solutions with no results in any of them:

-1

appModule.config(function ($compileProvider){
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|ghttps?|ms-appx|x-wmapp0):/);
})

-2 the ng-csp and meta:

 <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

-3 found angular windows fix js on other post inside stackoverflow. and no results. https://github.com/MSOpenTech/winstore-jscompat

Please does any one can help me on this.

THANKS IN ADVANCE.

How can I load a 3rd party css file in generator-mobileangularui

I'm having a problem with the generator-mobileangularui, I need to load a 3rd party css file under bower_components directory. The gulpfile.js file is reading the less files under directory src/less and compiling and copying it into the www directory, but there isn't anything to do the same with external libraries. In the config.js file (configuration file for gulpfile.js) there is something like that:

config.vendor.js.push('./bower_components/restangular/dist/restangular.min.js');

This, is used to attach 3rd party JS files to the project, but not css. I'm trying to load a jquery-ui css file for a slider element.

This is a question related to provide context: How to add an external library in Mobile Angular UI framework?

How can I do this? Thanks a lot.

[EDIT] Ok, to solve this problem, I modified the gulpfile.js file adding the following lines:

First, I defined a "bower_css" empty array:

vendor: {
    js: [
      './bower_components/angular/angular.js',
      './bower_components/angular-route/angular-route.js',
      './bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.js'
    ],

    fonts: [
      './bower_components/font-awesome/fonts/fontawesome-webfont.*'
    ],

    bower_css: []
  },

Then, I build a task to copy the css files to dist folder:

/*==================================
=            Copy bower_components css files          =
==================================*/

gulp.task('bower_css', function() {
  return gulp.src(config.vendor.bower_css, {base: './'})
  .pipe(gulp.dest(path.join(config.dest, 'css/')));
});

So, in config.js file, I added the following lines, for example for sweetalert:

config.vendor.bower_css.push(
    './bower_components/sweetalert/dist/sweetalert.css'
);

In that way, in the html file I can load the corresponding css file because are over the www directory. Is a custom solution but worked for me. I hope that solution be helpful to you people.

Thanks.

Model is not updating after select a date

The following code work with pure angularjs correct, but when I integrate it to a Mobile Angular UI App it does not update the model after selecting a date. If I edit the input field without the date picker it works fine.

Template:

<div>
<label>{{myLabel}}:</label>
<input class="form-control datetime-picker" placeholder="{{myPlaceholder}}" ng-model="ngModel" required="required">
</div>

Directive js code:

(function(){
    var app = angular.module('MeetingApp.directives.HelpDirective', []);

    app.directive("datetimePicker", function() {
        return {
            restrict: 'E',
            templateUrl: "datetime-picker.html",
            scope: {
                ngModel: '=',
                myPlaceholder: '@',
                myLabel: '@'
            },
            require: ['?^ngModel'],
            link: function(scope, element, attrs, ngModelCtrl) {
                $(element).find('.datetime-picker').datetimepicker({
                    format: "dd.mm.yyyy hh:ii",
                    autoclose: true,
                    language: "de",
                    startDate: new Date(),
                    minuteStep: 10
                });
            }
        };
    });
})();

Usage:

<form method="post" id="meetingForm" ng-controller="MeetingController as meetingCtrl" novalidate>    
    <datetime-picker my-placeholder="Startzeit" my-label="Startzeit" ng-model="meetingCtrl.meeting.start"></datetime-picker>
    <datetime-picker my-placeholder="Endzeit" my-label="Endzeit" ng-model="meetingCtrl.meeting.end"></datetime-picker>
</form>

Github link: https://github.com/knobli/meetingApp

To run the app: npm install -g bower yo gulp generator-mobileangularui bower install gulp build gulp

Unable to route non existing paths in Angularjs

I am unable to route the path code/:code in my website. I receive the following error:

Firefox can't find the file at /C:/Code/dola/mobileweb/app/code/123

default.htm is located in the app folder.

I am using the mobileangularui framework. I have the following routes declared (among others):

app.config(function ($routeProvider) {
    $routeProvider.when('/', { templateUrl: 'codeview.htm', reloadOnSearch: false });
    $routeProvider.when('/code/:code', { templateUrl: 'codeview.htm', reloadOnSearch: false });
});

Everything works fine, except when I try e.g. code/12345.

This route is intended for a call from outside, e.g. www.mywebsite.com/code/12345.

Mobile Angular UI: programmatically control ui-toggle elements

I'm building an app using Mobile Angular UI and I'm working with the scroll page from the demo app: http://mobileangularui.com/demo/#/scroll

I'd like to programmatically show/hide the Search Bar.

For example, when I receive a "q" param from the querystring, I'd like to have the search bar activated, when the user clicks on the "show search bar button" I'd like the search input box to receive focus, when the user searches something I'd like to hide the search bar, and so on.

this is the html code for the input box:

<input ng-if="Ui.active('searchBar')" class="form-control scrollable-header needsclick ng-scope" placeholder="Search.." type="search">

and this is the html for the toggle buttons:

<a class="btn btn-block btn-lg btn-primary scrollable-footer" ui-toggle="searchBar">
  <i class="fa fa-search"></i> 
  <span class="ng-hide" ui-hide="searchBar">Show</span>
  <span class="" ui-show="searchBar">Hide</span>
  Search Bar
</a>

What would be the correct way to achieve it?

Rendering issues with Safari on iOS and the Android "Browser"

Expected result (Chrome)

I have developed a mobile web app that works great with Chrome on Android. Here is a screenshot:

The white bar with Safari

Now I have some issues with other browsers. For instance Safari with iOS 8.3 on an iPhone 5 will display this ugly, plain white column on the right. Preventing <body> to take up the whole viewport's width and triggering the vertical scrollbar:

The empty page with the Android default browser

On the other hand, the "Browser" application that comes with most Android phones won't show what is below the top navbar:

This occurs for Browser 4.2.2 on a Wiko Iggy , but the problem is not present for Internet 2.1.34.1 on a Samsung Galaxy S4 (are "Browser" and "Internet" different applications developed separately? I have no idea.).

Markup

Here is the high level markup of the app. I'm using AngularJS with a yeoman generator and mobile-angular-ui as a UI library.

<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    ...
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="no">
    ...
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" media="(min-width: 641px)" rel='nofollow' href="styles/main.css">
    ...

    <link rel="stylesheet" media="(max-width: 640px)" rel='nofollow' href="styles/mobile/mainMobile.css">
    ...
    <!-- endbuild -->
  </head>
  <body ng-app="myApp" ng-controller="MainCtrl as MainCtrl">

    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a rel='nofollow' href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <div ng-view=""></div>
    <div ui-yield-to="modals"></div>

    <!-- build:js(.) scripts/oldieshim.js -->
    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.js"></script>
    <![endif]-->
    <!-- endbuild -->

  </body>
</html>

CSS

I have simply no css styling at all for html and body.

I can provide any additional information that you think is relevant to troubleshoot this issue. My first priority is to get the problem solved on iOS.

Fit zoom to show all markers. I already set center correctly

I have a map with several markers and I need to fit them all to the window. I'm using Mobile Angular UI: http://mobileangularui.com/ and Angular Google Maps: http://angular-ui.github.io/angular-google-maps/#!/

I define map with default center and zoom:

$scope.map = {
  center: {        // set on XXX as initial default
    latitude: 45.322594, 
    longitude: -2.938249 
  },
  zoom: 14,
  options: mapServices.getMapOptions().mapOptions
}; 

When I add markers to the map y extend bounds:

var markers = [];
var bounds = new google.maps.LatLngBounds();

for loop ....

var marker = {
          latitude: indicadores[i].sensores[j].lat, //43.401188,
          longitude: indicadores[i].sensores[j].lon, //-5.823359,
          title: indicadores[i].sensores[j].nombre,
          valor: getValor(indicadores[i], indicadores[i].sensores[j].ultimo_valor, indicadores[i].sensores[j].ultimo_estado),
          url: "#/sensor/" + $scope.$parent.Despliegue.id + "/"+ indicadores[i].id + "/" + indicadores[i].sensores[j].id,
          id: i,
          fit: true,
          options: { 
            icon: { url: obtenerImagen(indicadores[i].factor_ambiental, indicadores[i].sensores[j].ultimo_estado) }
          },
          showWindow: false,
        };

var latlng = new google.maps.LatLng(marker.latitude, marker.longitude);
bounds.extend(latlng);

markers.push(marker);

And then I get center and apply bounds:

var centro = bounds.getCenter();

$scope.map.center = { 
   latitude: centro.lat(),
   longitude: centro.lng()
}

var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();

$scope.map.bounds = {
   northeast: {
      latitude: ne.lat(),
      longitude: ne.lng()
   },
   southwest: {
      latitude: sw.lat(),
      longitude: sw.lng()
   }
}

I'm having the map perfectly centered but it doesn't zoom to fit all markers.

Any help, please? Thanks in advance!

Mobile Angular UI modal not able to update

Seems like modals in Angular UI is difficult to update, previously in Bootstrap I could update via jQuery but in Angular UI, not able to do even a simple update.

I have <span id="spnApproveSelectedCount">0</span> inside my modal-body, and I update it using jQuery $('#spnApproveSelectedCount').text(selectedCount); like this. It was working in Bootstrap but not in Angular UI.

Even update from $scope is not working if that variable is inside the modal. But if I moved them outside of modal it is working. I suspect it is because the modal is not display yet?

Updated:

I have a repeat in which the each item is clickable. When user clicked on it, it's supposed to open up the modal with further info. Below are my codes.

<div class="list-group">
      <div ng-repeat="approval in approvals" class="list-group-item">
        <div class="row">
          <div class="selectable" style="float: left; width: 95%" ui-turn-on="detailsModal" ng-click="SetDetails(approval)">
            <p class="list-group-item-text"><b>Ref</b> <span>{{ approval.ref }}</span></p>
            <p class="list-group-item-text"><b>Pay To</b> <span>{{ approval.payTo }}</span></p>
            <p class="list-group-item-text"><b>From</b> <span>{{ approval.from }}</span></p>
          </div>
        </div>
      </div>
    </div>

Notice that I have the ng-click on the row and below are my codes at controller.

$scope.SetDetails = function(current)
  {
      $scope.details = current;
  }

And also partial of my modal code..

<div class="modal" ui-if="detailsModal" ui-state='detailsModal'>
    <div class="modal-backdrop in"></div>
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" ui-turn-off="detailsModal">&times;</button>
          <h4 class="modal-title">Transaction Details</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-sm-5">
              Type
            </div>
            <div class="col-sm-7">
              <b>{{ details.category }}</b>
            </div>
          </div>
          <br />
          <div class="row">
            <div class="col-sm-5">
              Submitted By
            </div>
            <div class="col-sm-7">
              <b>{{ details.submittedBy }}</b>
            </div>
          </div>

Before everything, in fact in my controller I have a line of code to pre-set the details variable to take the first element (before it is passed to ng-repeat), this works and when the modal open, it is showing the first element value and that's it, the value stays there even if I click on row 2, 3 ...

$scope.details = $scope.approvals[0];