I am trying to upload an image from a drag and drop feature. I have set the modal and my drag and drop feature fine, but what I am having an issue is when I upload the file I would like to update the img src. I have a simplified version for my controller.
app.controller("CreateUploadInstanceCtrl", ["$scope", "$uibModalInstance",
function ($scope, $uibModalInstance) {
this.image = "/path";
}]);
In my modal call I have the following:
var modalInstance = $uibModal.open({
templateUrl: 'app/views/forms/upload_profile_picture.html',
controller: 'CreateUploadInstanceCtrl',
}
});
In my Html I would assume that I could just call
<img ng-src="{{image}}"/> to get the image to show on upload but I see nothing firing. I am not sure how the this.image can be translated to the html side since I can't load a controller into the html view. Would I need a resolve and if so how would I use the resolve?
Any help would be great.
Instead of this.image, try using $scope.image and in html specify ng-controller="CreateUploadInstanceCtrl"
Related
I'm trying to use https://github.com/mapsplugin/cordova-plugin-googlemaps in framework7 project
but I'm facing a problem
as i navigate to the map page The image is loaded but wasn't displayed
I think the issue is z-index
I tried that solution
https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/2028
but doesn't work
this is the page before map page
the red div is the place where image should display
after functions run i see that instead of map
I use this code to navigate to the map page
success: function (response) {
var responseObj = JSON.parse(response)
console.log(responseObj);
this.$root.navigate("/theMapPage/")
}
I found the solution
as I posted in comment that the plugin make the map behind the application
so I hide all pages and show the current page only
map.one(plugin.google.maps.event.MAP_READY, function () {
$$('.page').hide()
$$('.page.page-current').show()
map.clear();
map.getMyLocation(onSuccess, onError);
});
at end just show all pages again
pageAfterOut: function () {
// page has left the view
$$('.page').show()
}
I have one delete img and on clicking on that it will make an api call and delete the record, but on double click it is making multiple api calls. I tried disabling double click using ng-dblclick="return false;" but no use. can some one help me How to disable double click on img tag using angular js?
PS: I have seen this approach is working on div tag
Thanks
Here's an example of how you could avoid multiple api calls. It may look different than your code, but since you havn't provided any, this is the best I can do.
In your controller you'd have a variable, that you set to true on the first click and set to false when your API call returns with a response. Each time the function making the API call is executed, you check whether this variable is true. If it is, you simply return before making the API call again. This is the code (I'm skipping best practices here, to keep the sample minimal):
angular.module('app').controller('myController', function($http){
var ctrl = this;
ctrl.isDeleting = false;
ctrl.deleteRecord = function(id){
if(ctrl.isDeleting){
return;
}
ctrl.isDeleting = true;
$http.delete('[your_api_url]/' + id).finally(function(){
ctrl.isDeleting = false;
});
};
});
Then your html would look like this:
<img src="images/delete.png" ng-click="$ctrl.deleteRecord(id)" ng-class="{'img-disabled': $ctrl.isDeleting}" />
and add some css for visual feedback to the user:
.img-disabled {
cursor: default;
opacity: 0.5;
}
That's it.
To reiterate, I have no idea how your code looks, so I've taken a few assumptions that you'll have to account for when applying this solution.
The easiest option would be :
<img src="Tulips.png" alt="Add" height="25" width="25" ng-disabled="!isEnabled" ng-click="!isEnabled"></img>
var app = angular.module('main', []).
controller('DemoCtrl', function($scope, $filter) {
$scope.isEnabled=true;
});
I have two problems.
First my test.html doesn't "see" the products array from his controller.
I don't know why, I have connected the controller with the html in the routing.config.js.
var myapp = angular.module('myapp', ["ui.router", "ngAnimate"]);
myapp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state("foo", {
url: "/foo",
templateUrl:'start.html'
})
.state("test", {
url: "/test",
templateUrl: 'test.html',
controller:'product-controller',
parent:'foo'
})
$urlRouterProvider.otherwise("/foo");
})
myapp.controller('navCtrl', function($scope, $state){
$scope.navigateTo = function(target){
$state.go(target);
}
});
the second thing I want is that the test.html will be activated without the click on the link.
If the mainpage is loaded, the test.html should be loaded too.
At the end I want to delete the <ul> but the result should be the same.
(the foo and the dropdown).
I have made a PLUNK where you can see the problem.
The only solution I had, is to integrate the test.controller.js in the routing.config.js and the test.html in the start.html.
But i hope to avoid this because it makes the code more confusing.
I also looked at the ui-router docs but it doesn't work for me.
.state("foo.test", {
url: "/test",
templateUrl: 'test.html',
controller:'product-controller',
parent:'foo'
})
I hope someone has an idea... thank you! =)
I would take #charlietfl's advice and read up on nested views. Other than that, you had a few errors in your plunkr:
Forgot to load test-controller.js in index.html
Forgot to inject the product-selection module to myapp (so it can resolve the respective controller)
Forgot to add the ngModel to the select element in test.html for data binding to work as expected
Here's your plunkr updated with the select control populated properly.
I'm new to angularjs trying to test HTML elements but my test gets failed.Actually,i want to test the HTML element's value or text which it contain.
can anyone suggest me how can i achieve it?
here is my controllerspec:
describe('myAppCtrl', function() {
var scope, controller, httpBackend;
beforeEach(module('myApp'));
beforeEach(inject(function($rootScope, $controller, $httpBackend) {
scope = $rootScope;
controller = $controller;
httpBackend = $httpBackend;
}));
it('should show the text of element',function() {
expect($('#testtext')).toBe('First Angular JS App');
});
});
What you're doing above is with Karma for unit testing, and is only loading up the modules you've specified. In this case it loads the module myApp, but myApp doesn't have any reference to HTML and doesn't load the DOM itself.
If you want to test HTML elements directly, take a look at end to end testing using Protractor:
https://docs.angularjs.org/guide/e2e-testing
I'm using nodecellar to get a better understanding of backbone.js and I've come across a problem which was answered in great detail in a similar question, however, the answer doesn't seem to be working for me:
What i'm trying to do.
Using Nodecellars wineview, i'm trying to utilise the drag and drop feature, to upload an image. I've made a note of a previous very well answered question which basically states that you have to disable the default behaviour of on dragover, so I have the following in my wine view:
events: {
"change" : "change",
"click .save" : "beforeSave",
"click .delete" : "deleteWine",
"drop #profile" : "dropHandler",
"dragover #profile" : "dragover",
'dragenter #profile' : 'alertMe'
},
then my dragover event looks like this:
dragover: function(event){
console.log('drag over event called');
event.preventDefault();
},
This is fine and working as the console log is called when it fires. and the draghandler looks like this:
dropHandler: function (event) {
event.stopPropagation();
event.preventDefault();
var e = event.originalEvent;
e.dataTransfer.dropEffect = 'copy';
this.pictureFile = e.dataTransfer.files[0];
// Read the image file from the local file system and display it in the img tag
var reader = new FileReader();
reader.onloadend = function () {
$('#profile').attr('src', reader.result);
$('#picText').html('Picture added, select save to complete changes.')
};
reader.readAsDataURL(this.pictureFile);
}
The problem
The code works, however it doesn't upload the image or save the details in the model to the database. so once I move away then select the wine again the image is back to what it was originally.
I've done some research into the HTML5 fileReader api, but there isn't much on how it uploads, or where it uploads to.
And this is where I am now, I'm looking to you guys for suggestions on how to ensure the model saves the image url, and the image is uploaded to the pics folder.
How is the best way to go about this.
Is the HTML 5 fileReader API the best option to go with?
Thank you for your feedback.
Jay
You are missing in your function dropHandler the call to your model to set the property for the image you want to save.