I try to show a dialog error when the a web api fails. I am using bootbox for this purpose.
The code is:
OrderService.get(function(response) {
$scope.newOrder = response;
}, function(error) {
$bootbox.alert(error.statusText);
});
OrderService is a service:
app.factory('OrderService', [
'$resource', function($resource) {
return $resource('http://myweb/api/orders/neworder', {});
}]);
The first time that I open the web page, it works fine and the error message is displayed.
If I refresh the page, then the bootbox disable the entire screen and I cannot close the bootbox popup dialog.
If I replace $bootbox.alert(error.statusText); by alert(error.statusText);, then everything works fine.
If you are using some module to implement bootbox, 'cos $bootbox must injected
If not then, you can simple use without $:
OrderService.get(function(response) {
$scope.newOrder = response;
}, function(error) {
bootbox.alert(error.statusText);
});
from bootboxjs page:
Once you’ve got your dependencies sorted, usage is fairly
straightforward and much like any other JavaScript library you’ve ever
used. The library creates a single global instance of a bootbox object
Related
I'm building a Chrome extension and surprisingly, I could create one AngularJS app for the extension side and another for the content script side. The latter is useful to work with a modal-like element injected in the page. I injected this app with this content script:
var myApp = angular.module('ContentApp', []);
/**
* Append the app to the page.
*/
$.get(chrome.runtime.getURL('templates/modal.html'), function(data) {
$($.parseHTML(data)).appendTo('body');
// Manually bootstrapping AngularJS app because template was also manually imported.
angular.element(document).ready(function() {
angular.bootstrap(document, ['ContentApp']);
});
});
The problem comes now that modal.html is getting big and I still have to add more elements. I thought that I could start creating components in Angular and did it like this:
angular.module('ContentApp').
component('greetUser', {
template: 'Hello, {{$ctrl.user}}!',
controller: function GreetUserController() {
this.user = 'world';
}
});
This actually works. I can see the Hello, world message in the rendered page. But when I changed template for templateUrl, it failed:
// This doesn't work
templateUrl: 'templates/component.html',
// Neither does this
templateUrl: 'templates/component.html',
// Although this is similar to the way I got the main template, it didn't worked either
templateUrl: chrome.runtime.getURL('templates/component.html'),
Worth to mention that I added the permission to manifest.json:
"web_accessible_resources": [
"templates/*"
],
The error that I got in the console is this:
Error: [$sce:insecurl] http://errors.angularjs.org/1.5.11/$sce/insecurl?p0=chrome-extension%3A%2F%2Fext_id%2Ftemplates%2Fmodal.html
at chrome-extension://ext_id/scripts/lib/angular.min.js:6:426
at getTrusted (chrome-extension://ext_id/scripts/lib/angular.min.js:154:156)
Does anyone know how to make it work? Or am I asking too much for a Chrome extension?
I found the answer in this link. Thanks to faboolous who pointed me in the right direction ;)
Since templateURL is processed before $scope execution, the proper way to secure a template path in a Chrome extension is this:
// This works. Yay!
angular.module('ContentApp').
component('greetUser', {
templateUrl: ['$sce', function ($sce) {
return $sce.trustAsResourceUrl(chrome.runtime.getURL('templates/component.html'));
}],
controller: function ($scope) {
...
Background: I have a gui I'm putting together for an application I've been working on. The app loads its last state from a YAML file, and is supposed to save that state to the YAML file when the app closes. I'm using the following event listener...
// Handle close event
window.addEventListener('beforeunload', function(event) {
if(doc) {
// This line gives error: "Uncaught ReferenceError: main is not defined"
doc.project_notes.text = main.summernoteText;
fs.writeFile('../resources/project.yml', yaml.safeDump(doc), function (error) {
if (error) {
throw error
}
});
}
console.log("Bye...");
});
angular
.module('inspinia')
.controller('MainCtrl', MainCtrl)
(and in my index.html)
<body ng-controller="MainCtrl as main">
I'm saving all of the states in a global variable called doc. It loads the yml file just fine using the following
function MainCtrl() {
activeProject = LoadActiveProject();
/**
* summernoteText - used for Summernote plugin
*/
this.summernoteText = doc.project_notes.text;
};
My issue is primarily with scope of the angular controller/variables.
First, am I handling this correctly in general?
If this is reasonable, how can I update doc.project_notes.text from my unload function OR link the two variables by reference?
I'm pretty new to Javascript.
We have an Ionic app which polls a node/express API.
When the app starts it fetches the JSON data correctly from the API. When we update the data and fetch it again from the Ionic app, we still see the old data from the time that the app was launched.
We've tried to clear both the Angular cache and the Ionic cache in a variety of ways, but that doesn't seem to make a difference.
Things we've tried are:
$ionicConfigProvider.views.maxCache(0);, cache-view="false" on the template, setting cache: false on the state, tried accessing the state via $state.go($state.currentState, {}, {reload : true});, $ionicHistory.clearHistory(); and $ionicHistory.clearHistory();, $route.reload and $window.location.reload.
Controller:
function contactsController(Contacts, $stateParams) {
var vm = this;
var params = $stateParams.id;
Contacts.getAllContacts.then(function success(response) {
vm.data = response.data;
vm.selectedContact = response.data[params];
});
}
Factory
function contactsFactory($http, $stateParams) {
return {
getAllContacts: $http.get('https://api-call'),
update: function(url) {
$http.patch('https://api-call/update', [$stateParams.id, url]);
},
};
}
Express Back end
app.get('/', function (req, res) {
ref.once("value", function(snapshot){
res.send(snapshot.val());
});
});
app.patch('/update', function(req, res) {
var id = req.body[0];
ref.child(id).update({"imageURL": req.body[1]});
});
Thanks
Modify your view like this
<ion-view cache-view="false" view-title="My Title!">
Try console.log(vm) and verify that the updated data are obtained. If its only the view thats not being updated despite updated data being logged, I would try the following along with cache-view="false".
$scope.apply(function (){
// update your view here
vm.data = response.data;
vm.selectedContact = response.data[params];
});
By using Firebase's once() you have effectively removed all callbacks attached to value besides the first one:
Listens for exactly one event of the specified event type, and then
stops listening
Try switching to on() instead.
app.get('/', function (req, res) {
ref.on("value", function(snapshot){
res.send(snapshot.val());
});
});
It may be that your issue is not related to caching at all...
When I install Ionic 2 Open layers map on android device, i can see Open layers map successfully on the android screen. But when i close it and open the app again, i cant see the map. To solve this problem , what i do is: i uninstall the app, restart my device, then reinstall the app, after that i can see the map.
Please provide me a permanent fix.
Placing this in app config worked for me with
$ionicConfigProvider.views.maxCache(0);
$ionicConfigProvider dependency in config.
I'm extending an existing Angular-MVC.NET application.
There are two features: transformations (exisitng) and embossing (the one I'm creating). Both of them use provider classes that call an underlying logic.
I copied all the logic for the transformation (Angular and MVC model and views), renamed evrthing accordingly, and created the new route for this feature in app.router.js
$routeProvider.when('/embossing', {
templateUrl: 'app/views/embossing.html',
params: { test: "hola" },
resolve: {
deps: [
"$ocLazyLoad", function (a) {
debugger;
return a.load([jqload.c3, jqload.sparkline])
.then(function () {
return a.load({
name: "app.directives",
files: ["app/scripts/lazyload/directives/sparkline.directive.js"]
});
})
.then(function () {
return a.load("angular-c3");
})
.then(function () {
return a.load("easypiechart");
});
}
]
}
});
Now I'm able to navigate without issues from the angular transformation controller to the embossing view by using
$location.path('/embossing');
The thing that happens is that when I load directly the view by entering http://localhost:1623/embossing/ or if I hit enter on the browrser's URL bar after navegating from transformation (as I mentioned before) I get this error
How come I'm able to navigate to the view but when I load it directly I get that error?
Is there something that I'm missing? What could be wrong?
Thanks
MVC and AngularJS Routing - 403.14 - Forbidden
It got solved by renaming the "Embossing" folder (the one that contains EmbossingProvider.cs)
It seems that there cannot be a folder name as a route. eg:
$routeProvider.when('/embossing', was conflicting with "Embossing" folder
How can I start fetching data from the server as quickly as possible with Angular?
Currently, most of my page is populated asynchronously via a directive "fooload" placed at the root element:
<html lang="en" ng-app="myapp" fooload ng-controller="MyAppCtrl">
<head>
/* bunch of CSS, and other resources */
</head>
Which loads data into the scope via an http GET request:
angular.module('myapp.directives').
directive('fooload', function ($http) {
return {
link: function (scope, elm, attrs) {
$http.get('/foo').success(function (data) {
scope.foo = data;
});
}
};
});
Looking at the network panel, this call is being made in the browser AFTER the requests for the resources referenced in head. How can I make the call to load /foo data as quickly as possible on page load (if possible, even before loading angular itself)?
This is not really related to Angular, obviously Angular cannot start loading files before Angular has loaded itself. But if the resource (eg /foo) is cacheable by the browser you could add it to a manifest file: http://www.html5rocks.com/en/tutorials/appcache/beginner/
I solved this by:
a) fetching the data even before angular loads and storing it in a global variable (I hate using a global variable, but I couldn't think of another way.)
b) manually bootstrapping angular upon load of this data (my app doesn't work at all without the data)
var $data;
var ajax_transport = new XMLHttpRequest();
// Callback for AJAX call
function responseProcess() {
if (ajax_transport.readyState !== 4) {
return;
}
if (ajax_transport.responseText) {
$data = JSON.parse(ajax_transport.responseText);
angular.bootstrap(document, ['myApp']);
});
}
}
// Sending request
ajax_transport.open("GET", "/mydata", true);
ajax_transport.onreadystatechange = responseProcess;
ajax_transport.send();
Note: it's important to remove the tag ng-app="myapp" in your template to avoid automatic bootstrapping.
c) Using the data in my angular app:
scope.setupSomething($data);
d) Also, to ensure that this data call begins before any other resource load, I started using a resource loader. I liked HeadJs (http://headjs.com/) the most, but the angular folks seem to like script.js (https://github.com/angular/angular-phonecat/blob/master/app/index-async.html)
Criticism or improvements welcome.
Start by creating a new service that gets the resource and then bootstraps the document for angular upon success callback from the server.
angular.element(document).ready(function() {
calllService(function () {
angular.bootstrap(document);
});
});
https://stackoverflow.com/a/12657669/1885896