wowee....can't use flask to return a json object to plot a flot chart in angularjs.
Totally does not work. I use the hard coded json...the chart shows. Whats the deal with a get requests in angularjs? I go to localhost:5000/datatest and I see my json object. Yet angular will not plot a valid json object?
In flask..
#app.route('/datatest')
def datatest():
test1 = [[[0, 1], [1, 5], [2, 2]]]
data = json.dumps(test1)
resp = Response(data, status=200, mimetype='application/json')
return resp
My Controller and Directive.
var App = angular.module('App', []);
App.controller('Ctrl', function ($scope,$http) {
$http.get('datatest').success(function(data) {
$scope.data = data;
});
//$scope.data = [[[0, 1], [1, 5], [2, 2]]];
});
App.directive('chart', function() {
return {
restrict: 'E',
link: function(scope, elem, attrs) {
var data = scope[attrs.ngModel];
$.plot(elem, data, {});
elem.show();
}
};
});
My HTML:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="static/js/jquery/jquery-2.1.0.js"></script>
<script type="text/javascript" src="static/js/flot/jquery.flot.js"></script>
<script type="text/javascript" src="static/js/angular/angular.min.js"></script>
<script type="text/javascript" src="static/lib/flot/controller.js"></script>
<style type='text/css'>
chart {
display:none;
width:400px;
height:200px;
}
</style>
</head>
<body>
<div ng-app='App'>
<div ng-controller='Ctrl'>
<chart ng-model='data'></chart>
</div>
</div>
</body>
</html>
Your directive is calling $plot before $http finishes getting data. Instead, you can watch the data array in your directive, and call $plot when it changes:
app.directive('chart', function() {
return {
restrict: 'E',
scope: {
data: '='
},
link: function(scope, elem, attrs) {
scope.$watch('data', function() {
if (scope.data.length > 0) {
$.plot(elem, scope.data, {});
elem.show();
}
})
}
};
});
html: <chart data='data'></chart>
Here is a demo: http://plnkr.co/7nx2Xf5i1OfLEkzMdwNm
Related
I want to create a search bar that pulls searches through the data of a json object and displays data to the user. I currently have code that looks like this and it works fine.
<html>
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div id='app'> <input type='text' v-model='keyword' placeholder='search title'> <button v-on:click="">automotive</button> <div v-for="post in filteredList"> <iframe width="420" height="315" v-bind:src="post.link"> </iframe> <a v-bind:href="post.link">{{post.title}}</a> </div> </div>
<script> "use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Post = function Post(title, link, author, img) {
_classCallCheck(this, Post);
this.title = title; this.link = link; this.author = author; this.img = img; }; var app = new Vue({ el: '#app', data: {
keyword:'',
postList: [
new Post(
'Vue.js',
'https://www.youtube.com/embed/tgbNymZ7vqY',
'Chris',
'https://vuejs.org//images/logo.png'
),
new Post(
'React.js',
'https://www.youtube.com/embed/k3frK9-OiQ0',
'Tim',
'http://daynin.github.io/clojurescript-presentation/img/react-logo.png'
),
new Post(
'Angular.js',
'https://angularjs.org/',
'Sam',
'https://angularjs.org/img/ng-logo.png',
),
new Post(
'Ember.js',
'http://emberjs.com/',
'Rachel',
'http://www.gravatar.com/avatar/0cf15665a9146ba852bf042b0652780a?s=200'
),
new Post(
'Meteor.js',
'https://www.meteor.com/',
'Chris',
'http://hacktivist.in/introduction-to-nodejs-mongodb-meteor/img/meteor.png'
),
new Post(
'Aurelia',
'http://aurelia.io/',
'Tim',
'https://cdn.auth0.com/blog/aurelia-logo.png'
),
new Post(
'Node.js',
'https://nodejs.org/en/',
'A. A. Ron',
'https://code-maven.com/img/node.png'
),
new Post(
'Pusher',
'https://pusher.com/',
'Alex',
'https://avatars1.githubusercontent.com/u/739550?v=3&s=400'
),
new Post(
'Feathers.js',
'http://feathersjs.com/',
'Chuck',
'https://cdn.worldvectorlogo.com/logos/feathersjs.svg'
), ] }, methods: {
}, computed:{
filteredList(){
return this.postList.filter((post) => {
return post.title.toLowerCase().includes(this.keyword.toLowerCase());
});
} } })
</script> </body> <html>
Ignore what the links are going to it doesnt matter. The problem Im having however is getting this to work from an external source via an axios request. I've done axios request before and got json data back but im struggling to make this search feature work with it. The following is an example of the broken code (ignore the v-on:click its not set up yet. ignore the fact there are no videos I can deal with that later I just need the search feature to work with an json data from an axios request) but I keep getting errors like 'type error : this.item is not defined' and 'object error' anyway heres the code:
<html>
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id='app'>
<input type='text' v-model='keyword' placeholder='search item'>
<button v-on:click="">automotive</button>
<div v-for="item in filteredList">
<p>{{item.name}}</p>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
keyword:'',
itemList: '',
},
created: function() {
this.loaddata();
},
methods: {
loaddata: function(){
var vueapp = this;
axios.get('https://jsonplaceholder.typicode.com/users').then(function (response){
vueapp.itemList = response.data;
})
},
},
computed:{
filteredList(){
return this.item.filter((item) => {
return item.name.toLowerCase().includes(this.keyword.toLowerCase());
});
}
}
})
</script>
</body>
<html>
You don't have item declared in your data. you can't call this.item.filter in your filteredList() method when you don't have it declared.
You can change your filteredList with this.itemList.filter() which is the list being loaded in loaddata()
In the below code, I'm trying to get a console log in the Directive (child scope),I need to get scope details.I tried adding a scope variable to the function in the directive also, but didn't work.
How can I fix this?
myDirective.html
<html ng-app="MyAppdr">
<head>
<script src="angular.js"></script>
<script src="appdr.js"></script>
</head>
<body ng-controller="dirCtrl">
<h1>hello</h1>
<employee-card></employee-card>
<!--div employee-card></div>
<div class="employee-card"></div--->
</body>
<html>
employee_info.html
<b>{{employee.name}}</b> - {{employee.job}}
<br/><br/>
<div ng-show='!!employee.followers'>
followers
<ul>
<li ng-repeat='name in employee.followers'>{{name}}</li>
</ul>
<button ng-click="follow('Galaa')">follow</button>
</div>
</div>
appdr.js
name="MyAppdr";
requires=[];
appdr=angular.module(name,requires);
appdr.controller("dirCtrl",function($scope){
console.log("This is controller dirCtrl");
$scope.employee={
name:"subo",
job:"cat",
followers:["chin","adyakshaka","aluu"]
}
console.log("parent ",$scope);
/*
$scope.follow=function(name){
$scope.employee.followers.push(name);
}
*/
});
appdr.directive("employeeCard",function(){
//$scope.employee={};
console.log("child ",$scope);
return{
templateUrl:'employee_info.html',
restrict:"AEC",
//replace:true,
controller:function($scope){
$scope.follow=function(name){
$scope.employee.followers.push(name);
}
},
scope:true
}
});
For your particular case, using scope: false seems to be sufficient if you are not showing multiple cards in same page.
appdr.directive("employeeCard",function() {
return {
scope: false,
// other attributes
If you need to show multiple cards in same page, use isolated scope and pass in
appdr.directive("employeeCard",function() {
return {
scope: {
employee: '='
},
// other attributes
<employee-card employee="employee"></employee-card>
Move the console.log() inside the controller of the directive.
appdr.directive("employeeCard", function() {
return {
templateUrl: 'employee_info.html',
restrict: "AEC",
//replace:true,
controller: function($scope) {
console.log("child ", $scope);
$scope.follow = function(name) {
$scope.employee.followers.push(name);
}
},
scope: true
}
});
If you will have only one employee card on the page then keep scope: true else if you need to show multiple cards in the same page, use an isolated scope and pass it in the template.
appdr.directive("employeeCard", function() {
return {
templateUrl: 'employee_info.html',
restrict: "AEC",
//replace:true,
controller: function($scope) {
console.log("child ", $scope);
$scope.follow = function(name) {
$scope.employee.followers.push(name);
}
},
scope: {
employee: "="
}
}
});
And in the html use something like
<employee-card employee="employee"></employee-card>
Refer the documentation of directive here
I have nested abstract view in my angular js project.
I got Error : Cannot transition to abstract state 'main.middle' when i move to nested abstract view.
My html code is as below:
<!DOCTYPE html>
<html ng-app="nesting">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-router#*" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="testController">
href:
<br />
#/alpha
#/beta
#/gama
<button ng-click="moveToMiddle()">move to middle</button>
<br />
ui-sref:
<br />
<a ui-sref="main.middle.alpha">main.middle.alpha</a>
<a ui-sref="main.middle.beta">main.middle.beta</a>
<a ui-sref="main.middle.gama">main.middle.gama</a>
<hr />
<div ui-view=""></div>
<script>
'use strict';
var $urlRouterProviderRef = null;
var $stateProviderRef = null;
var app = angular.module('nesting', [
'ui.router'
]);
app.config(function( $urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/alpha');
$stateProvider
.state('main', {
url: "",
abstract: true,
template: '<div><h3>Main</h3><div ui-view=""></div></div>',
})
.state('main.middle', {
url: "",
abstract: true,
template: '<div><h4>Middle</h4><div ui-view=""></div></div>',
})
.state('main.middle.alpha', {
url: "/alpha",
template: '<div><h5>The leaf: {{state.name}}</h5></div>',
controller: function ($scope, $state){
$scope.state = $state.current;
},
})
.state('main.middle.beta', {
url: "/beta",
template: '<div><h5>The leaf: {{state.name}}</h5></div>',
controller: function ($scope, $state){
$scope.state = $state.current;
},
})
.state('main.middle.gama', {
url: "/gama",
template: '<div><h5>The leaf: {{state.name}}</h5></div>',
controller: function ($scope, $state){
$scope.state = $state.current;
},
})
;
});
app.controller('testController', function ($scope, $state) {
$scope.moveToMiddle = function () {
$state.go('main.middle');
}
})
</script>
</body>
</html>
When I click on move to middle button I got error.
How to move to abstract view?
I have referred this but its not useful in my case.
You never go to an abstract state. From the docs:
An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated.
If you define main.middle.alpha, main.middle.beta, and main.middle.gama as not abstract, you can transition to those.
As mentioned in angualr docs
An abstract state can have child states but can not get activated
itself. An 'abstract' state is simply a state that can't be
transitioned to. It is activated implicitly when one of its
descendants are activated.
app.controller('testController', function ($scope, $state) {
$scope.moveToMiddle = function () {
$state.go('main.middle.alpha');
}
as abstract state cannot be instantiated and can't viewed. if you want to access then remove abstract line
I am trying to integrate dropzone.js and cloudinary into Polymer 1.0. It does work, but I am hitting a stumbling block on how to send the dynamic URL generated by Cloudinary back to Polymer so I can write that URL into Firebase. I am inside a function listening to dropzone events with the intention of using iron-signals to signal a different web component. "this" is now scoped to dropzone.js and not Polymer.
..resulting in "Uncaught TypeError: this.fire is not a function".
The code is below, I am trying to start the iron-signal based on listening the dropzone.js "success" event which provides access to the new image URL.
<link rel="stylesheet" href="../../../bower_components/dropzone/dist/min/dropzone.min.css">
<dom-module id="my-dropzone">
<style>
:host {
display: block;
}
div#my-dropzone-area {
max-width=300px;
height=300px;
border: 4px dashed blue;
}
</style>
<template>
<paper-button on-tap="startTheMessage">Test Fire!</paper-button>
<iron-signals on-iron-signal-hello="passTheMessage">
<div class="dropzone" id="my-dropzone-area">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</div>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'my-dropzone',
ready: function() {
// access a local DOM element by ID using this.$
Dropzone.options.myDropzoneArea = {
paramName: 'file', // The name that will be used to transfer the file
maxFilesize: 10, // MB
uploadMultiple: false,
acceptedFiles: '.jpg,.png,.jpeg,.gif',
parallelUploads: 6,
addRemoveLinks: true,
url: 'https://api.cloudinary.com/v1_1/remarkable-ky/image/upload',
init: function() {
this.on('addedfile', function(file) {
console.log('Added file.');
console.log(file);
});
this.on('sending', function(file, xhr, formData) {
console.log('Sending file.');
formData.append('api_key', 0000000000000);
formData.append('timestamp', Date.now() / 1000);
formData.append('upload_preset', 'where-ky');
});
this.on('success', function(file, response) {
var baseURL = 'http://res.cloudinary.com/remarkable-ky/image/upload/';
var url = baseURL.concat(response.public_id);
console.log('Cloudinary URL: ', url);
this.fire('iron-signal', {
name: 'hello',
data: null
});
});
}
};
},
startTheMessage: function() {
this.fire('iron-signal', {
name: 'hello',
data: null
});
},
passTheMessage: function() {
alert("got it");
},
properties: {},
});
})();
</script>
<script src="../../../bower_components/dropzone/dist/min/dropzone.min.js"></script>
you can pass this into the function with the .bind() function.
this.on('success', function(file, response) {
var baseURL = 'http://res.cloudinary.com/remarkable-ky/image/upload/';
var url = baseURL.concat(response.public_id);
console.log('Cloudinary URL: ', url);
this.fire('iron-signal', {
name: 'hello',
data: null
});
}.bind(this));
I'm working for the first time with Angular.js. I already search too many articles in order to correct this error. I receive the following error when my Index.html is loaded:
Here is the code:
report-module.js
angular.module('reportTemplateApp', [
'reportTemplateApp.services',
'reportTemplateApp.controllers',
'ngRoute'
]).
config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/slide1/:auditId', {
templateUrl: 'slide1.html',
controller: 'MainSlideController',
controllerAs: 'main'
})
.when('/slide3/:auditId/sl/:slideId', {
templateUrl: 'slide3.html',
controller: 'CommonSlidesController',
controllerAs: 'commons'
});
$locationProvider.html5Mode(true);
}]);
report-controller.js
angular.module('reportTemplateApp.controllers', []).
controller('CommonSlidesController', '$routeParams', function ($scope, $routeParams, auditAPIservice) {
$scope.id = $routeParams;
$scope.slideId;
$scope.slide = [];
//CANCEL EDIT
$scope.cancelSave = function () {
$scope.mainList = $scope.backupList;
}
//SAVE DATA
$scope.saveSlide = function () {
try {
auditAPIservice.ItemsData($scope.mainList).then(function (response) {
if (response.message = "Success") {
}
else {
$scope.mainList = $scope.backupList;
}
});
} catch (ex) {
$scope.showToast('UPS! Something happen ' + ex.message);
}
}
//GET DATA
reportAPIservice.getSlide(2, 3).then(function (response) {
if (response.message = "Success") {
$scope.mainList = response.data.ReportSlideInfo
angular.copy($scope.mainList, $scope.backupList);
}
else {
//SOME ERROR SHOWING HERE
}
});
$scope.showToast = function (message) {
angular.element(document).ready(function () {
toast(message, 4000);
});
}
}).
Index.html
<!DOCTYPE html>
<html>
<head>
<script src="../Scripts/jquery-1.7.1.js"></script>
<script src="../Scripts/materialize/materialize.min.js"></script>
<title></title>
<link rel="stylesheet" type="text/css" href="../Content/materialize/materialize.css" />
</head>
<body ng-app="reportTemplateApp">
<script>
$(document).ready(function () {
$(".button-collapse").sideNav();
$('.collapsible').collapsible();
});
</script>
Text Link<br/>
<div ng-view></div>
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/angular-route.js"></script>
<script src="~/Scripts/angular-resource.js"></script>
<script src="../Scripts/SPS/Report/report-module.js"></script>
<script src="../Scripts/SPS/Report/report-controller.js"></script>
<script src="../Scripts/SPS/Report/report-service.js"></script>
</body>
</html>
I don't know what it's wrong. Another thing, the error shows when I add in the Index page, if I remove it no error is present.
I was able to fix this. I had (I don't know why) in the project mixed versions of the angular.js(1.2.23) and angular-route.js (1.3.8). After change one with the same version of the other there is no error and routing works.