IONIC Problemas al mostrar una imagen local (sacada con la camara) en un control IMG

[Problem] Saving imageUri inside Array then displaying
Images using ‘ng-repeat’

ionic

1

 / 

3

 

dallarosa

Sep 2

1 

Hello, I'm John and I am trying to create a self increasing slide box where I can add Images from the Gallery to it.
Let's start with the slide item using 'ng-repeat' property :

<ion-slide ng-repeat="image in images">
       <img class="add-collection-item-div-image-container" src="{{image.imageUrl}}" id="myImage" >
</ion-slide>

Now there is the 'cameraSuccess' function wich is called when I select an image from the pic gallery or from the device camera:

function cameraSuccess(imageURI) {

            if (imageURI.substring(0, 21) == "content://com.android") {
                var photo_split = imageURI.split("%3A");
                imageURI = "content://media/external/images/media/" + photo_split[1];
            }
            $scope.images[$scope.images.length] = { imageUrl: imageURI};
            $ionicSlideBoxDelegate.update();
        }

The problem is : The picture taken from the Camera and the picture that comes from the gallery is never displayed on the ion-slide item.
These are the imageUri I get from the device camera and the pic gallery:
Pic gallery imageUri : "content://media/external/images/media/5240"
Device camera imageUri :"file:///storage/emulated/0/Android/data/com.ionicframework.app802132/cache/478.jpg"
Please does any one have a solution for that?
Thanks!
[EDIT]
Removed this code

.config(function ($stateProvider, $urlRouterProvider, $compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist('img/');
})

from 'app.js' and the Image from the device Camera works now but the image from the Pic Gallery still does not display...

• created

  Sep 2

• last post

  Sep 3
• 3

  posts

• 75

  views

• 2

  users

• 1

  likes

• 2
  

h4ck3rviv3k

Sep 2

Try adding below lines in your app.js

.config(['$compileProvider', function($compileProvider) {
         $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|content):|data:image\//);
        }])

1 person liked this.

dallarosa

Sep 3

Thank you so much h4ck3rviv3k!

It worked beatifully! 

Fuente: http://forum.ionicframework.com/t/problem-saving-imageuri-inside-array-then-displaying-images-using-ng-repeat/9049

Launch External URLs with IonicFramework

fuente: http://blog.nraboy.com/2014/07/launch-external-urls-ionicframework/

I recently found myself needing to launch external URLs with IonicFramework.  I needed to let my users contact me via my personal website or visit my Twitter page.  This is not a task that ends well when trying to execute from an Ionic view.  Luckily, with a little help from the Apache Cordova plugin InAppBrowser, I was able to accomplish the task with very little effort.  The best part is that it works for iOS and Android with the same code set.

To make use of this great plugin, using a command prompt navigate to the root of your Ionic project.  Run the following command to download and install the InAppBrowser plugin to your project:

Install Plugin

Shell

1	cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

From this point, you don’t need any extra code in your app.js file.  The launching of external pages can be done directly from your view.  Take the following example:

example.html

XHTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<ion-view title="Test Page">     <ion-content>         <div class="list">             <a class="item" href="#" onclick="window.open('http://www.nraboy.com/contact', '_system', 'location=yes'); return false;">                 Open a Browser             </a>             <a class="item" href="#" onclick="window.open('http://www.twitter.com/nraboy', '_system', 'location=yes'); return false;">                 Open a Twitter Client or Browser             </a>             <a class="item" href="#" onclick="window.open('https://plus.google.com/+NicRaboy', '_system', 'location=yes'); return false;">                 Open a Google+ Client or Browser             </a>         </div>     </ion-content> </ion-view>

As described in the wiki, there are several ways to launch the InAppBrowser and all perform differently.

Code	Description
window.open(‘http://example.com’, ‘_system’);	Loads in the system browser
window.open(‘http://example.com’, ‘_blank’);	Loads in the InAppBrowser
window.open(‘http://example.com’, ‘_blank’, ‘location=no’);	Loads in the InAppBrowser with no location bar
window.open(‘http://example.com’, ‘_self’);	Loads in the Cordova web view

I personally prefer the native experience which the _system option seems to provide.  Note that if you run the InAppBrowser code via a web browser it will just open a new page.

A video version of this article can be seen below.

Obtener el valor de entrada de formulario con Ionic

1.- html
<div ng-controller="StaticCtrl">
    <input type="radio" ng-model="lunch" value="chicken" name="lunch">
    <input type="radio" ng-model="lunch" value="beef" name="lunch">
    <input type="radio" ng-model="lunch" value="fish" name="lunch">
    {{lunch}}
</div>
<hr>

 
 
<div ng-controller="DynamicCtrl">
    <input type="radio" ng-model="lunch" ng-repeat="m in meat" value="m" name="lunch">  
    {{lunch}}
</div>
 
 
2.- Controller

var myApp = angular.module('myApp',[]);

function StaticCtrl($scope) {
    $scope.lunch= 'chicken';
}

function DynamicCtrl($scope) {
    $scope.meat = ['chicken', 'beef', 'fish'];
    $scope.lunch = 'chicken';
}


3.- Screen - Example

   chicken

---

 chicken

Construir aplicaciones moviles multiplataforma: Android, IOS ... IONIC

Ionic es un framework que ha unido distintas tecnologías para permitir a un desarrollador escribir aplicaciones usando html5, CSS, javascript (Angular JS) .. y que estas sean compiladas y ejecutadas para una plataforma móvil mediante el uso de Cordova o PhoneGap.

Para ello necesitaremos instalar en el sistema los SDK a desarrollar: Android, IOS ....
NodeJS: Linea de comandos para trabajar.


IONIC: Framework que aúna varias tecnologías

$ npm install -g cordova ionic

y algunas necesidades que irán surgiendo como JRE y apache-ant ...

El sistema es un poco laborioso de montar por la cantidad de información que manejamos pero paciencia y al toro.

(Mas adelante modificaremos este articulo para explicar como montar el sistema de desarrollo necesario)



1.- Iniciar un proyecto IONIC

$ ionic start myApp tabs

(Tipos de proyectos por defecto)

$ ionic start myApp blank



$ ionic start myApp tabs



$ ionic start myApp sidemenu

  








2.- Compilar un proyecto Ionic
$ cd myApp
$ ionic platform add (ios or android)
$ ionic build (ios or android)
$ ionic emulate (ios or android)

continuar

¿Como instalar un plugIn para tus proyectos?

1.- Descargar el cliente Git desde http://git-scm.com/download/win
2.- Desde una ventana de comandos establacer el PATH en el sistema si no lo tenemos:
     Ejemplo: set PATH=%PATH%;C:\Program Files (x86)\Git\bin

3.- Instalar el PlugIn con una sentencia en el cmd. Ejemplo: cordova plugin add https://github.com/christocracy/cordova-plugin-background-geolocation.git