I've done custom directive for frag and drop file upload and put it on a module but it is not working as expected. It is showing error in console and copying that as well.
Could any one tell where i went wrong?
<html>
<head>
<title>Angular Js Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style>
div[dropzone] {
border: 2px dashed #bbb;
border-radius: 5px;
padding: 25px;
text-align: center;
font: 20pt bold;
color: #bbb;
margin-bottom: 20px;
}
</style>
</head>
<body ng-app="Myapp">
<div dropzone>Drop Files Here</div>
<script type="text/javascript">
var app = angular.module("Myapp", ['dropzone']);
app.directive("dropzone", function() {
return {
restrict : "A",
link: function (scope, elem) {
elem.bind('drop', function(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.readAsArrayBuffer(f);
reader.onload = (function(theFile) {
return function(e) {
var newFile = { name : theFile.name,
type : theFile.type,
size : theFile.size,
lastModifiedDate : theFile.lastModifiedDate
}
scope.addfile(newFile);
};
})(f);
}
});
}
}
});
</script>
</body>
</html>
dropzone is not a different module. You can't inject it to your Myapp module.
it is a directive living inside myApp. You need to read more about angular directives and modules
change
var app = angular.module("Myapp", ['dropzone']);
to
var app = angular.module("Myapp");
it'll probably work
Related
I am using ng map and geting ui for half of the screen but not geting it in full div
var app = angular.module('app', ['ngMap']);
app.controller('ctrl', ['$scope', 'ngMap','$timeout', function($scope, ngMap,$timeout) {
NgMap.getMap().then(function(map) {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
$timeout(function() {
NgMap.getMap().then(function(map) {
google.maps.event.trigger(map, 'resize');
});
}, 500);
}]);
#ng-map {
width: 100% !important;
height: 100% !important;
position: absolute !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div map-lazy-load="https://maps.google.com/maps/api/js" id="ng-map" map-lazy-load-params="https://maps.google.com/maps/api/js?key=AIzaSyB4qnR0XX1tetbLUxSSLVWKi_E4WzGi1tk">
<ng-map zoom="4">
</ng-map>
</div>
</div>
i dont know why i am geting this error .Please help me
First thing is I believe you are setting it on wrong element you need to set it up on element inside your #ng-map div try changing you CSS to (also try not to use !importants):
#ng-map ng-map{
width: 100%;
height: 100%;
position: absolute;
}
After that, you can try setting up:
default-style="false"
on your ng-map directive, also try with inline styles, here's example:
<ng-map zoom="4" default-style="false">
</ng-map>
And plunker:
http://plnkr.co/edit/Qh2O0W?p=preview
I have a main index.html file and in that file, I want to include another .html using ng-include. This is my code:
(I will only upload the relevant code sections, if the whole code is needed, I can edit it)
index.html
<!DOCTYPE html>
<html>
<head>
<!-- include CAPH 3.0.1 default package -->
<link href="lib/caph/3.0.1/caph.min.css" rel="stylesheet" type="text/stylesheet">
<link href="styles/main.css" rel="stylesheet" type="text/stylesheet">
<!-- include jQuery file (you can use AngularJS & jQuery in your environment) -->
<script src="lib/caph/3.0.1/bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="lib/caph/3.0.1/bower_components/angular/angular.min.js" type="text/javascript"></script>
<!-- include the CAPH Package for AngularJS -->
<script src="lib/caph/3.0.1/caph-angular.min.js" type="text/javascript"></script>
</head>
<script>
var myApp = angular.module('myApp', ['caph.focus', 'caph.ui']);
myApp.factory('sharedProperties', function(){
var DEPTH={
MAIN_MENU: 1,
RESTAURANT: 2,
MOVIES: 3,
MOVIE_SELECT: 4
};
var currentDepth;
var focus = function($event) {
$($event.currentTarget).css({
border: '10px solid red'
});
}
var blur = function($event){
$($event.currentTarget).css({
border : '3px solid transparent'
});
}
var select = function($event){
if($event.target.id === "roomservice"){
currentDepth = DEPTH.RESTAURANT;
} else if($event.target.id === "vod"){
currentDepth = DEPTH.MOVIES;
} else if($event.target.id === "back"){
currentDepth = DEPTH.MAIN_MENU;
} else if($event.target.id === "fantasy"){
currentDepth = DEPTH.MOVIE_SELECT;
}
return currentDepth;
}
return{
focus: focus,
blur: blur,
select: select,
currentDepth: currentDepth,
depth: DEPTH
}
});
myApp.controller('myController', function($scope, sharedProperties) {
$scope.currentDepth = sharedProperties.depth.MAIN_MENU;
$scope.focus = function($event){
sharedProperties.focus($event);
}
$scope.blur = function($event){
sharedProperties.blur($event);
}
$scope.select = function($event){
$scope.currentDepth = sharedProperties.select($event);
console.log($scope.currentDepth);
}
$scope.items = [];
for (var i = 0; i < 20; i++) {
$scope.items.push({
text: i+1,
image: 'image/moviepics/' + (i%2 + 1) + '.jpg'
});
}
</script>
<body ng-app="myApp">
<div ng-controller="myController">
<div ng-if="currentDepth === 4">
<h1>Pick a movie</h1>
<div ng-include="'new.html'">
</div>
</div>
</div>
</div>
</body>
</html>
And this is new.html:
<style>
.list{
position: absolute;
width: 600px;
height: 135px;
overflow: hidden;
margin-bottom: 10px;
border: 1px solid transparent;
}
.item{
background: green;
box-sizing: border-box;
border: 3px solid white;
width: 200px;
height: 135px;
}
</style>
<caph-list container-class="list" on-focus-item-view="onFocusItemView($context)" items="item in items">
<div class="item" focusable data-focusable-initial-focus="{{$index===0?true:false}}">
<div class="test" style="width:100%; height:100%; background-size:100% 100%; background: url({{item.image || ''}})"></div>
</div>
</caph-list>
I am getting an ng-areq error with a WARNING of angular loaded more than once. For the full error, please see the attached picture.
I hope my question and code is clear
Any and all help is appreciated. Thank you.
When you include a template, HTML of relevant section of the page needs to be present in it.
In your new.html, you've included everything from the HTML tag which is unnecessary. Remove those and have only the necessary div and other elements.
I'm trying to use Yandex Maps with this AngularJS module.
Here they have demonstrations, and here's my code:
index.html
<!DOCTYPE html>
<html lang="ru" xmlns:vml="urn:schemas-microsoft-com:vml" ng-app="myApp" ng-controller="myController">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="style.css">
<script src="angular.min.js"></script>
<script src="ya-map-2.1.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="map" class="w3-col s10 w3-dark w3-border">
<!--
<ya-map ya-zoom="8" ya-center="[37.64,55.76]" style="width:400px;height:500px;"></ya-map>
-->
</div>
</body>
</html>
script.js
console.log("script starts");
var myApp = angular
.module('myApp', ['yaMap'])
.controller("myController", function ($scope) {
console.log("In the controller");
var _map;
$scope.afterMapInit = function (map) {
_map = map;
};
$scope.del = function () {
_map.destroy();
};
console.log("After $scope ops");
$scope.initialize = function () {
var mapOptions = {
center: [50.5, 30.5],
zoom: 8
};
ymaps.ready(function () {
$scope.map = new ymaps.Map("map", mapOptions);
})
}
});
style.css
body {
background-color: #fff;
margin: 40px;
}
#body {
margin: 0 15px 0 15px;
}
#frmMain {
width: 100%;
height: 100%;
}
Please, if you know why I can't load the map and what's wrong with that code, (I suppose it's all wrong though), tell me about it!
I'm total novice in AngularJS and Yandex Maps, so, it may appear a silly question for you, but I cannot find anything useful on the Internet.
Promblem here in style for non-standard tag ya-map. By default browser set it display property to "inline", so without text element collapse to width:0, height:0.
Also, you not use any functions declared in controller.
You can see samples in Demo Page
var myApp = angular
.module('myApp', ['yaMap'])
.controller("myController", function($scope) {
var _map;
$scope.afterMapInit = function(map) {
_map = map;
};
$scope.del = function() {
_map.destroy();
};
});
ya-map {
display: block;
width: 400px;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//rawgit.com/tulov/angular-yandex-map/master/ya-map-2.1.min.js"></script>
<div id="map" class="w3-col s10 w3-dark w3-border" ng-app="myApp" ng-controller="myController">
<ya-map ya-zoom="8" ya-center="[37.64,55.76]" ya-after-init="afterMapInit($target)"></ya-map>
<button ng-click="del()">Удалить</button>
</div>
I've already tried to follow instructions in this question, but I'm stuck, so I had to ask this as a new question.
I am trying to create infinite scroll where a user can see his activities. Only 10 (10 is a hypothetical number here) activities will be shown at a time, so performance will be better.
I created a simple pagination on backend and it works as expected.
/feed/1 -> displays first 10 results (0-10)
/feed/2 -> displays 10 more (10-20)
/feed/3 -> displays 10 more (20-30)
Since I use $http, I couldn't find a way to mimick it, so I put it here as it is for now. There may be more than one issue here, I tried to be careful, though.
Here's my plunk : http://plnkr.co/edit/DLAMy56jwyeqYdN1kvT3?p=preview
Here's my code.
index.html
<!doctype html>
<html lang="en" ng-app="feed">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ui-view></div>
<!-- Everything is in template.html -->
</body>
</html>
template.html
<div class="virtualRepeatdemoInfiniteScroll">
<md-content layout="column">
<md-virtual-repeat-container id="vertical-container" flex>
<div md-virtual-repeat="FeedFlow in PostController.data" md-on-demand class="repeated-item" flex>
<div ng-repeat="text in FeedFlow.feed">
{{FeedFlow.id}} <!-- whose post is this? -->
{{text.status}} <!-- status -->
</div>
</div>
</md-virtual-repeat-container>
</md-content>
</div>
style.css
.virtualRepeatdemoInfiniteScroll #vertical-container {
height: 292px;
width: 400px;
}
.virtualRepeatdemoInfiniteScroll .repeated-item {
border-bottom: 1px solid #ddd;
box-sizing: border-box;
height: 40px;
padding-top: 10px;
}
.virtualRepeatdemoInfiniteScroll md-content {
margin: 16px;
}
.virtualRepeatdemoInfiniteScroll md-virtual-repeat-container {
border: solid 1px grey;
}
.virtualRepeatdemoInfiniteScroll .md-virtual-repeat-container .md-virtual-repeat-offsetter {
padding-left: 16px;
}
script.js
angular.module('feed', ['ui.router', 'ngMaterial']);
angular.module('feed').run(
['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]
)
.config(
['$stateProvider', '$urlRouterProvider', '$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$stateProvider
.state('posttest', {
url: '/post1',
templateUrl: 'template.html',
resolve: {
data: 'vm.data',
},
controller: 'PostController'
});
}
]
);
// This is how I normally fetch a feed page. (PostData factory)
// I commented out this part and tried to inregrate it below at PostController section.
/*
angular.module('feed').factory('PostData', ["$http", function($http) {
return $http.get("/feed/1").then(function(response) {
return response.data;
});
}]);
*/
// This is the part I couldn't inregrate it.
// Original link is here : https://material.angularjs.org/latest/demo/virtualRepeat
// I'm trying to implement Infinite Scroll, a demo can be seen below
// http://codepen.io/anon/pen/NxeVwo
angular.module('feed').controller('PostController', ['$scope', '$http', function($scope, $http, $timeout) {
var vm = this;
vm.data = {
numLoaded_: 0,
toLoad_: 0,
items: [],
// Required.
getItemAtIndex: function(index) {
if (index > this.numLoaded_) {
this.fetchMoreItems_(index);
return null;
}
return this.items[index];
},
// Required.
getLength: function() {
return this.numLoaded_ + 1;
},
fetchMoreItems_: function(index) {
if (this.toLoad_ < index) {
this.toLoad_ += 1;
$http.get('/feed/' + this.toLoad).then(angular.bind(this, function(response) {
this.items = this.items.concat(response.data);
this.numLoaded_ = this.toLoad_;
}));
}
}
};
}]);
This example is injected into the ngAnimate.
First, you need to visit this test page like "/#/test/1" , 3 seconds after the modified $location.path ('/test/2'), the controller is re loaded,but the floating layer can not be displayed (box.css('display', 'block') failure).
If you do not inject ngAnimate, everythings is ok, the floating layer can be displayed.
I don't know what's going on, it's a bug ngAnimate?
HTML:
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
.popup {
position: fixed; width: 100%; height: 100%; background-color: rgba(36,36,36,.96); top: 0; left: 0; z-index: 1;
}
.popup .context .hd {
font-size: 32px; color:#FFF; text-align: center;
}
.popup .close {
font-size: 32px; color:#999; text-align: center;
}
</style>
</head>
<body>
<div class="wrapper" ng-view></div>
<script src="angular_1.4.1.min.js" type="text/javascript"></script>
<script src="angular-route.min.js" type="text/javascript"></script>
<script src="angular-animate.min.js" type="text/javascript"></script>
</body>
</html>
template demo.html
route : <span style="color:red; font-size: 32px;">{{id}}</span>
<input type="button" pop-window-open ng-click="openPopWindow()" style="width:200px; height: 50px;" value="open window">
<section class="popup" id="popWindow" style="display: none;">
<div class="context">
<div class="hd">pop window</div>
<div class="bd"></div>
</div>
<div class="close" pop-window-close ng-click="closePopWindow()">close</div>
</section>
javascript:
angular.module('app', ['ngRoute', 'ngAnimate', 'youyuApp.controllers', 'youyuApp.directives'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/test/:id', {
templateUrl : 'demo.html',
controller : 'ctrl1'
});
}]);
angular.module('youyuApp.controllers', [])
.controller('ctrl1', ['$scope', '$location', '$timeout', '$routeParams',
function($scope, $location, $timeout, $routeParams) {
$scope.id = $routeParams.id;
$timeout(function() {
$location.path('/test/2');
}, 3000);
}]);
angular.module('youyuApp.directives', [])
.directive('popWindowOpen', function() {
return {
restrict: 'EA',
link : function(scope, element, attrs) {
var box = angular.element(document.getElementById('popWindow'));
scope.openPopWindow = function() {
box.css('display', 'block');
};
}
}
})
.directive('popWindowClose', function() {
return {
restrict: 'EA',
scope : true,
link : function(scope, element, attrs) {
var box = angular.element(document.getElementById('popWindow'));
scope.closePopWindow = function() {
box.css('display', 'none');
};
}
}
})