So I'm trying to add routes to my angularJS app, and I'm running intro a problem where the main controller for my app stops working if I try to add 'ngRoute' to the app. Additionally, ngRoute is not working.
My code:
app.js (angular logic)
(function() {
angular.module('fccNight', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'results.html'
})
.otherwise({ redirectTo: '/' });
}])
//controllers
.controller('mainController', ['$scope', '$http', function($scope, $http) {
$scope.searchTerm = '';
$scope.data = [];
$scope.loading = false;
$scope.goingNo = [];
$scope.getResults = function() {
if($scope.searchTerm !== '') {
$scope.loading = true;
$scope.data = [];
$http.get('/api/search?term=' + $scope.searchTerm)
.success(function(results) {
$scope.loading = false;
$scope.data = results;
for(var i = 0; i < $scope.data.length; i++) {
$scope.goingNo.push($scope.data[i].going);
}
});
}
}
$scope.addGoing = function(index) {
// check if user is authenticated
if($scope.data[index].going > $scope.goingNo[index]) {
$scope.data[index].going -= 1;
}
else {
$scope.data[index].going += 1;
}
// register in db
}
}])
})();
index.html's body:
<body ng-controller="mainController" id="mainController">
<!-- CONTENT -->
<div class="container">
<div class="row text-center">
<div class="col-xs-12 main">
<h1>Where are you going tonight?</h1>
<p>Find nearby pubs and RSVP ahead of time.</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-2">
<form>
<div class="input-group">
<input id="inputSearch" ng-model="searchTerm" type="text" class="form-control" placeholder="Where are you?" autocomplete='off'>
<span id="goBtn" class="input-group-btn">
<a ng-click="getResults()" class="btn btn-default">Go</a>
</span>
</div>
</form>
</div>
</div>
<!-- LOADING -->
<div class="row loading hidden" ng-show="loading">
<div class="col-xs-12">
<div class="loader"></div>
</div>
</div>
<div class="text-center">Controller is working if search term is displayed: {{ searchTerm }}</div>
<!-- TEMPLATE -->
<div ng-view></div>
</div>
<!-- footer -->
<footer class="row-footer">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<a href="https://github.com/otmeek/fcc-night">
<i class="fa fa-github"></i>
</a> |
<a href="https://www.freecodecamp.com">
<i class="fa fa-fire"></i>
</a> | built using the Yelp API
</div>
</div>
</div>
</footer>
<!-- =====================SCRIPTS===================== -->
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
<!-- custom scripts -->
<script src="js/app.js"></script>
<script src="js/scripts.js"></script>
</body>
results.html (the template I want to load in on '/' route)
<p>Results are loading</p>
<div class="row result" ng-repeat="result in data">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-2 result">
<div class="row">
<!-- image -->
<div class="col-xs-3 col-sm-2">
<div class="image">
<img ng-src="{{ result.image || 'img/noimage.jpg' }}">
</div>
<div ng-click="addGoing($index)" class="going text-center">
{{ result.going || 0 }} going
</div>
</div>
<!-- text -->
<div class="col-xs-9 col-sm-10">
<h4><a ng-href="{{ result.url || '#' }}">{{ result.name }}</a>
<small>{{ 'Rating: ' + result.rating || 'No rating available' }}</small></h4>
<p>{{ result.text || 'No reviews for this establishment.' }}</p>
</div>
</div>
</div>
</div>
As I said, if I remove all the routing logic from app.js and ng-view from index.html and just add in results.html, the app is running fine, controller is loading properly and everything is ok. But upon adding 'ngRoute' to the app, the results template doesn't load and I can't access any mainController variables or logic from index.html.
If anyone knows what I'm doing wrong please let me know. Thanks!
Edit: I just noticed the cdn for angular-route.js is not working. I can't find a download link for this library in the official site and I don't have bower so I have no idea where to get this file.
There is an error for angular-route.js
https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js
its adress is wrong. There is no version for it. Write your version insteadof X.Y.Z
suchas https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js
You need to change X.Y.Z by any specific version like 1.4.8 in your index.html page for angular route.
So you should use
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
instead of
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
Related
I've split my HTML off into a view using angular, but when I've done so I get the error:
Argument 'EventController' is not a function
This worked previously with no issue, it's only since I've tried splitting them off and writing a route and I'm really struggling to see what the problem is? I've checked all the spelling of the files, script declarations etc and that all seems fine.
My base index page is:
<html lang="en" ng-app="eventsApp">
<head>
<meta charset="utf-8" />
<title>Create Event</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Events List</li>
<li>Create Event</li>
</ul>
</div>
</div>
<ng-view></ng-view>
</div>
<script src="lib/jquery.min.js"></script>
<script src="lib/underscore-1.4.4.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/EventController.js"></script>
<script src="js/controllers/EditEventController.js"></script>
<script src="js/controllers/EventList.js"></script>
<script src="js/services/EventData.js"></script>
<script src="js/filters.js"></script>
</body>
</html>
The HTML I'm putting in the view is:
<div style="padding-left:20px; padding-right:20px;">
<img ng-src="{{event.imageUrl}}" alt="{{event.name}}" />
<button type="button" class="btn btn-primary" ng-click="scrollToSession()">Scroll to Session</button>
<div class="row">
<div class="spann1">
<!--Style and Bind Template Directives w/ Uppercase Filter-->
<h2 ng-style="mystyle" ng-bind-template="{{event.name | uppercase}}"></h2>
</div>
</div>
<!--Disabled Directive-->
<button class="btn" ng-disabled="buttonDisabled">Disabled</button>
<!--Non-Bindable Directive-->
<div ng-non-bindable="nonBindable">{{1 + 2}}</div>
<!--Hide/Show & Class Directive-->
<h2 ng-show="boolValue">Show This</h2>
<h2 ng-hide="boolValue" ng-class="myclass">Hide This</h2>
<div class="row">
<div class="span3">
<!--Date Filter-->
<div><strong>Date:</strong> {{event.date | date:'mediumDate'}}</div>
<div><strong>Time:</strong> {{event.time}}</div>
<!--Currency Filter-->
<div><strong>Price:</strong> {{event.price | currency:'£'}}</div>
</div>
<div class="span4">
<address>
<strong>Address:</strong><br />
{{event.location.address}}<br />
{{event.location.city}}, {{event.location.province}}
</address>
</div>
</div>
<!--Expressions-->
{{[1,2,3][2]}}
<!--Number Filter-->
<div>{{3 | number:2}}</div>
<!--JSON Filter-->
<div>{{ { a:3, b:'hi', c:{aa:35} } | json }}</div>
<!--Repeat Directive-->
<hr />
<h3>Sessions</h3>
<div>
Order By:
<select ng-model="sortOrder" class="input-small">
<option value="name">Name Asc</option>
<option value="-name">Name Desc</option>
<option value="creatorName">Creator Asc</option>
<option value="-creatorName">Creator Desc</option>
<option value="level">Level Asc</option>
<option value="-level">Level Desc</option>
</select>
Show:
<select ng-model="difficulty.level" class="input-small">
<option value="">All</option>
<option value="Advanced">Advanced</option>
<option value="Introductory">Introductory</option>
<option value="Intermediate">Intermediate</option>
</select>
</div>
<ul class="thumbnails">
<li ng-repeat="session in event.sessions | orderBy:sortOrder | limitTo:3 | filter:difficulty" id={{session.id}}>
<div class="row session">
<div class="span0 well votingWidget">
<div ng-click="upVoteSession(session)" class="votingButton">
<i class="icon-chevron-up icon-white"></i>
</div>
<div class="badge badge-inverse">
<div>{{session.upVoteCount}}</div>
</div>
<div ng-click="downVoteSession(session)" class="votingButton">
<i class="icon-chevron-down icon-white"></i>
</div>
</div>
<div class="well span9">
<h4 class="well-title">{{session.name}}</h4>
<h6 style="margin-top:-10px;">{{session.creatorName}}</h6>
<!--Custom Filter-->
<span>Duration: {{session.duration | durations}}</span><br />
<span>Level: {{session.level}}</span>
<p>{{session.abstract}}</p>
</div>
</div>
</li>
</ul>
</div>
The route data is:
var eventsApp = angular.module('eventsApp', ['ngResource', 'ngRoute'])
.config(function($routeProvider){
$routeProvider.when('/newEvent', {
templateUrl:'templates/NewEvent.html',
controller: 'EditEventController'
});
$routeProvider.when('/events', {
templateUrl: 'templates/EventList.html',
controller: 'EventListController'
});
$routeProvider.when('/events/:eventId', {
templateUrl: 'templates/EventDetails.html',
controller: 'EventController'
});
}
);
And the EventController.js file:
'use strict';
eventsApp.controller('EventController', function($scope, eventData, $anchorScroll){
$scope.snippet = '<span style="color:red;">hi there</span>';
$scope.boolValue = false;
$scope.mystyle = {color:'red'};
$scope.myclass = "blue";
$scope.buttonDisabled = false;
$scope.nonBindable = true;
$scope.sortOrder = 'name';
$scope.difficulty = "";
eventData.getEvent()
.$promise.then(
function(event) {$scope.event = event; console.log(event);}
).catch(function(response) {console.log(response);}
);
$scope.upVoteSession = function(session){
session.upVoteCount++;
}
$scope.downVoteSession = function(session){
session.upVoteCount--;
}
$scope.scrollToSession() = function() {
$anchorScroll();
}
});
Seems that "use strict" is causing function declaration to break due to syntax error and not throwing specific syntax error in console:
Remove extra ()
$scope.scrollToSession() = function() {
// ^^ shouldn't be here
$anchorScroll();
}
I guess since you don't have a reference to your module when defining a controller it won't define it as it should. So try changing your first line from:
eventsApp.controller('EventController', ...
to:
angular.module('eventsApp').controller('EventController', ...
Note that eventsApp is just a local variable in your main file.
In which file do you define eventsApp? It looks like you may be attempting to use EventController before it is loaded.
I want to insert a dictionary (array of objects) into the view in my project . The view is called "product", the controller is called "ProductCtrl".
The output I want to show is just static data. Below is my code:
/*
* "product" module.
*/
'use strict';
angular.module('myApp.products', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/products', {
templateUrl: 'products/products.html',
controller: 'ProductCtrl'
});
}])
.controller('ProductCtrl', [function($scope) {
//the problem is that I wanna insert those elements using angular and I cannot.
$scope.productos=[
{titulo:"1111", descripcion:"!", precio: 25.95, imagen: "camisetas2.png"},
{titulo:"2222", descripcion:"!A", precio: 25.95, imagen: "camisetas3.png"}
];
}]);
<!--("Producto" View-HTML)-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="row" ng-controller="ProductCtrl">
<div class="col-md-12">
<div class="row" ng-repeat="producto in productos"> <!-- Basic for loop -->
<div class="col-md-12">
<!-- Inicio del contenido; se exponen la empresa y sus servicios (9/4 grid system) -->
<h2>{{ producto.titulo }}</h2>
<div class="row">
<div class="col-md-2">
<img width="120" height="120" alt="mundo camis" src="img/mundo.jpg" class="img-circle">
</div>
<div class="col-md-10">
<div class="caption">
<h3> {{ producto.titulo }} </h3>
<p> {{ producto.descripcion }} </p>
<p> <a class="btn-primary" href="#">Ver más</a> </p>
</div>
</div>
</div>
</div>
</div>
<br /> <br />
</div>
</div>
</div>
You had a few mistakes, and the most important - not setting the ng-app attribute. I made a simple example for you to use. Code below, link here: http://codepen.io/anon/pen/GoqWyM.
I advise learning Angular from the following tutorial: http://campus.codeschool.com/courses/shaping-up-with-angular-js/ .
The answer:
/*
* "product" module.
*/
'use strict';
var app = angular.module('Products', []);
app.controller('Producto', [function() {
this.productos=[
{titulo:"1111", descripcion:"!", precio: 25.95, imagen: "camisetas2.png"},
{titulo:"2222", descripcion:"!A", precio: 25.95, imagen: "camisetas3.png"}
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Products" class="row" ng-controller="Producto as ProdCtrl">
<div ng-repeat="producto in ProdCtrl.productos">
{{ producto.titulo }}
</div>
</div>
I'm unable to figure out the mistake that's leading to nothing displaying in my div.
HomeController.js (Controller):
app.controller('HomeController', ['$scope', function($scope) {
$scope.icons = [
...
];
$scope.works = [
{
title: 'An Artsy Title for an Artsy Image',
img: 'img/an-artsy-image.png',
orientation: 'portrait',
description: "A artsy description here."
}
];
}]);
index.html (Homepage):
<!DOCTYPE HTML>
<html ng-app="portfolio">
<head>
...
<!-- AngularJS Controller -->
<script src="js/controllers/HomeController.js" type="text/javascript"></script>
<!-- AngularJS Directive -->
<script src="js/directives/introIcon.js" type="text/javascript"></script>
<script src="js/directives/workExpo.js" type="text/javascript"></script>
...
</head>
<body ng-controller="HomeController">
<div class="container-fluid hero">
...
</div>
<div class="container-fluid work-wrapper">
<div class="container work-container">
<div ng-repeat="work in works">
<work-expo info="work"></work-expo>
</div>
</div>
</div>
</body>
</html>
workExpo.js (Directive):
app.directive("workExpo", function() {
return {
restrict: 'E',
scope: 'info',
templateUrl: 'views/directives/workExpo.html'
};
});
workExpo.html (Directive Template):
<div class="row" ng-if="info.orientation === 'landscape'">
<div class="col-lg-12">
<img ng-src="{{ info.img }}" class="img-responsive center-block" />
</div>
<div class="col-lg-12">
<h3>{{ info.title }}</h3>
<p>{{ info.description }}</p>
</div>
</div>
<div class="row" ng-if="info.orientation === 'portrait'">
<div class="col-sm-6">
<img ng-src="{{ info.img }}" class="img-responsive center-block" />
</div>
<div class="col-sm-6">
<h3>{{ info.title }}</h3>
<p>{{ info.description }}</p>
</div>
</div>
It is not clear of what is it that I'm missing in the above code which is leading to my code not displaying at all. To my knowledge there is no problem with the controller or directive in general as the other directive in my code (code not shown) is working just fine.
This is what the code becomes post-compilation as per Chrome's code inspector:
...
<div class="container-fluid work-wrapper">
<div class="container work-container">
<!-- ngRepeat: work in works -->
<div ng-repeat="work in works" class="ng-scope">
<work-expo info="work">
<!-- ngIf: info.orientation === 'landscape' -->
<!-- ngIf: info.orientation === 'portrait' -->
</work-expo>
</div>
<!-- end ngRepeat: work in works -->
</div>
</div>
...
Now clearly, it has not returned any DOM elements under <!-- ngIf: info.orientation === 'portrait' --> which should rather be the case.
Please let me know in case you need any further details. Thanks.
Your scope binding is incorrect in your directive. You need to construct an object with an info property and add 2-way binding of that to the info attribute. Yu can do this as so:
scope: {info:'=info'},
This creates an info property on the scope which evaluates the value of the info attribute, i.e. evaluates work on the parent scope.
Your full directive code therefore becomes:
app.directive("workExpo", function() {
return {
restrict: 'E',
scope: { info: '=info' },
templateUrl: 'views/directives/workExpo.html'
};
});
and everything else can stay the same.
Working JsFiddle
<!-- ngIf: info.orientation === 'landscape' -->
<!-- ngIf: info.orientation === 'portrait' -->
It shows both are not matching so nothing shows
I check your code and it looks good, do one thing to check the value, put following code any where on your page
<pre>
{{ info | json}} - {{ info.orientation | json}}
</pre>
I'm trying to get books to display based on the assignment above but can't figure out what is wrong for the life of me.
I built the service and modified the controller and view pages to the point where I believe they should display the books in the view, but I'm just seeing a blank page.
I feel like I am probably not retrieving the data properly and accessing it in the view/html.
Any ideas? Link to jsFiddle.
Index.html
<body ng-app="ReaderApp">
<div class="header">
<div class="container">
Reader
</div>
</div>
<div class="main">
<div class="container">
<div ng-view></div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/BookshelfController.js"></script>
<script src="js/controllers/BookController.js"></script>
<script src="js/controllers/ChapterController.js"></script>
<!-- Services -->
<script src="js/services/books.js"></script>
</body>
js/apps.js
var app = angular.module('ReaderApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/books', {
controller: 'BookshelfController',
templateUrl: 'views/bookshelf.html'
})
.otherwise({
redirecTo: '/books'
});
});
js/services/books.js
app.factory('books', ['$http', function($http) {
return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/books-api/books.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
js/controllers/BookshelfController
app.controller('BookshelfController', ['$scope', 'books', function($scope, books) {
books.success(function(data) {
$scope.myBooks = data;
});
}]);
js/views/bookshelf.html
<div class="bookshelf row">
<!--
TODO: Loop through myBooks and display each one with this HTML
<div class="book col-md-3">
<a href="#/books/{{$index}}">
TODO: Add the book's cover here
<h3 class="title"> </h3>
<p class="author"> </p>
</a>
</div>
-->
<div class="book col-md-3" ng-repeat="book in myBooks">
<a href="#/books/{{$index}}">
<img ng-src="{{ book.cover }}">
<h3 class="title">{{ book.title }}</h3>
<p class="author">by {{ book.author }}</p>
</a>
</div>
</div>
I think I had the same trouble and my problem was in the router. Try adding array brackets ( [ ] ) and the '$routeProvider' string in your config method (app.js) like this:
app.config(['$routeProvider', function($routeProvider) {
// Normal router stuff goes here
}]);
Coming from Ember, the syntax is a little weird so I've been using this tutorial as reference when I get stuck.
I'm using angularjs. The example I have done works perfectly in firefox, but does not work any other browser.
The error that appears in other browsers when I press add picture botton in index is:
XMLHttpRequest cannot load file:///C:/...../gifwallet/add_gif.html. Cross origin requests are only supported for HTTP.
I do not understand is what is wrong.
index.html
<html lang="es" ng-app="gifwalletApp">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<script src="javascripts/angular.js"></script>
<script src="javascripts/angular-translate.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="src/app.js"></script>
<script src="javascripts/ui-bootstrap-tpls-0.11.0.min.js"></script>
<title>GIF Wallet</title>
</head>
<body>
<div class="container">
<div ng-controller="TranslateController">
<button ng-click="changeLanguage('es')" translate="BUTTON_TEXT_ES"></button>
<button ng-click="changeLanguage('en')" translate="BUTTON_TEXT_EN"></button>
</div>
<header ng-controller="MenuController">
<ul class="nav nav-pills pull-right">
<li class="active">
<a href="#">
<span class="glyphicon glyphicon-home"></span>
<span class="badge pull-right">42</span>
</a>
</li>
<li>
<span class="glyphicon glyphicon-plus"></span>
</li>
<li>
<span class="glyphicon glyphicon-search"></span>
</li>
</ul>
<h3 class="text-muted">GIF Wallet</h3>
</header>
<div id="images" class="row" ng-controller="gifListController">
<div class="col-lg-12 media" ng-repeat="gif in giflist">
<a href="" class="pull-left thumbnail">
<img class="media-object" src="{{ gif.url }}">
</a>
<div class="media-object">
<h4 class="media-heading">{{ gif.name }}</h4>
<p>
<a><span class="glyphicon glyphicon-minus"></span> {{ 'FAVORITO' | translate }}</a>
</p>
<p>
<a><span class="glyphicon glyphicon-heart"></span> {{ 'ELIMINAR' | translate }}</a>
</p>
<p>
Link: {{ gif.url }}
</p>
</div>
</div>
</div>
<footer>
<p>© GIFWallet 2014</p>
</footer>
</div>
app.js
var gifwalletApp = angular.module('gifwalletApp', ['ui.bootstrap','pascalprecht.translate']);
gifwalletApp.config(function($translateProvider) {
$translateProvider.translations('en', {
FAVORITO: 'Favorite',
ELIMINAR: 'Delete'
})
.translations('es', {
FAVORITO: 'Favorito',
ELIMINAR: 'Eliminar'
});
$translateProvider.determinePreferredLanguage();
});
gifwalletApp.controller('TranslateController', function($translate, $scope) {
$scope.changeLanguage = function (langKey) {
$translate.use(langKey);
};
});
gifwalletApp.controller('gifListController', ['$rootScope','$scope','Storage','$http',
function($rootScope,$scope,Storage,$http){
$scope.giflist = Storage.list();
$rootScope.$on('reloadList', function(event, data){
$scope.giflist = Storage.list();
});
}]);
gifwalletApp.controller('MenuController', ['$rootScope','$scope', 'Storage','$modal',
function($rootScope,$scope, Storage, $modal) {
$scope.add = function() {
$modal.open({
templateUrl: 'add_gif.html',
controller: function($scope, $modalInstance) {
$scope.Gif = {};
$scope.save = function() {
var image = {
'name': $scope.Gif.name,
'url': $scope.Gif.url,
'tags': [],
'favorite': false
};
Storage.save(image);
$rootScope.$broadcast('reloadList');
$modalInstance.dismiss('cancel');
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
}
});
};
}
]);
gifwalletApp.service('Storage', ['$window', function($window) {
var images = [];
if (!$window.localStorage) {
alert('No tienes localStorage activado');
} else {
images = $window.localStorage.getItem('gifWallet');
}
this.save = function(image) {
if (images == null) {
images = [];
}
else {
images = angular.fromJson(images);
}
images.push(image);
imagesString = JSON.stringify(images);
$window.localStorage.setItem('gifWallet', imagesString);
}
this.get = function(key) {
}
this.remove = function(key) {
}
this.list = function() {
return angular.fromJson($window.localStorage.getItem('gifWallet'));
}
}]);
add_gif.html
<div class="modal-header">
<h3 class="modal-title">Agregar GIF</h3>
<p class="text-muted">Añade un gif favorito a tu wallet usando el nombre y la URL</p>
</div>
<div class="modal-body">
<form action="" role="form">
<div class="form-group">
<label for="name">Nombre</label>
<input type="text" id="name" ng-model="Gif.name" placeholder="Corgi bailarín" class="form-control">
</div>
<div class="form-group">
<label for="url">URL</label>
<input type="url" id="url" ng-model="Gif.url" placeholder="http://..." class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-link" ng-click="cancel()">Cancelar</button>
<button class="btn btn-primary" ng-click="save()">Agregar GIF</button>
</div>
You shouldn't be using the src attribute with Angular Expressions.
Use ngSrc - as described in the docs.
<img class="media-object" ng-src="{{ gif.url }}">
Edit:
In your modalpanel you'll need to make sure the form that is beeing submitted is valid
Moved here from comment:
The reason why it won't work without the http:// is probably because the input field for the URL is of type="url" and urls are not valid with http/https. So it actually is a different problem here. The form should be validated before adding an image. :)
When you call partials in Angular, it makes a cross domain request. Firefox allows it, Chrome and others don't.
So, you have to launch a local web server to make it run on all browsers (Apache, with Xampp / Mamp, whatever).
Your script only runs on firefox because firefox allow cross origin requests (AJAX requests)
and chrome will not allow cross origin request because of security policies.
So in order to run your script in chrome You have to disable web security in chrome
To disable web-securities in chrome:
kill the chrome process
press "ctrl+R" to open run menu
type "chrome --disable-web-security" without quotes and press enter
then you will be able to run your script
Please let me know If you have any issues with other browsers?