can not access outer once i use mdDiloag in angular meterial - angularjs

i'm trying to open dialog box using angular material mdDialog with one text box and drop down field but once it open it can not access outer scope data.
my code is
$scope.ouetButton=function(){
$mdDialog.show({
scope: $scope.$new(),
templateUrl: "printDialog.html"
});
// Button click in templete
$scope.closeDialog = function(sheetout, reason, teststartTime) {
$mdDialog.hide();
var sheets = $scope.sheets;
console.log("i got this value undifined ",sheets );
}
}
if i use some paramater like
$scope.ouetButton=function(){
$mdDialog.show({
scope: this,
templateUrl: "printDialog.html"
});
// Button click in templete
$scope.closeDialog = function(sheetout, reason, teststartTime) {
$mdDialog.hide();
var sheets = $scope.sheets;
console.log("i got this value fine",sheets );
}
}
than it get value of sheets but after close it i can not click again on
$scope.ouetButton

To get a JSON string (e.g., from reading a file) into an actual JavaScript object, use JSON.parse(string). Here is an example:
fs.readFile('data.txt', function(err, data) {
if (err) throw err;
var array = JSON.parse(data); // converts the JSON string into an actual object/array
// use array as you did in your question...
});
BONUS: Use a for...of loop to process each element of the array:
for (var obj of array) {
console.log(obj.date_created);
// etc.
}
Note that this is only available since ECMAScript 6, but since you're using Node.js, that shouldn't be a problem.

This file contains a VALID JSON STRING, so just read the file and do JSON.parse(), and then you can do anything else with the JSON object.

Related

How to know selected file is image or not using angular js?

I am using Angular js with ASP.NET MVC and file upload done using codepen method.
It is running fine because I want to store the binary array so I can convert later and set it back.
But the problem I am facing is to validate the selected thing is image or not!
I can't find the way how can I check the selected thing is image or not?
Anyone have any idea about this?
I have also used parsley js for validation but it is angular js here also how can I use parsley to validate the selected thing is image or not or manually?
angular.module('starter', [])
.controller('Ctrl', function($scope) {
$scope.data = {}; //init variable
$scope.click = function() { //default function, to be override if browser supports input type='file'
$scope.data.alert = "Your browser doesn't support HTML5 input type='File'"
}
var fileSelect = document.createElement('input'); //input it's not displayed in html, I want to trigger it form other elements
fileSelect.type = 'file';
if (fileSelect.disabled) { //check if browser support input type='file' and stop execution of controller
return;
}
$scope.click = function() { //activate function to begin input file on click
fileSelect.click();
}
fileSelect.onchange = function() { //set callback to action after choosing file
var f = fileSelect.files[0], r = new FileReader();
if(f.type === 'image/jpeg' || f.type === 'image/png') {
console.log('The file type is ' + f.type);
// do something here
} else {
console.log('The file type is ' + f.type);
// do some other thing here
}
r.onloadend = function(e) { //callback after files finish loading
$scope.data.b64 = e.target.result;
$scope.$apply(); console.log($scope.data.b64.replace(/^data:image\/(png|jpg);base64,/, "")); //replace regex if you want to rip off the base 64 "header"
//here you can send data over your server as desired
}
r.readAsDataURL(f); //once defined all callbacks, begin reading the file
};
});
or you can dynamically set accept="image/*" attribute to your html element.
check here

My $scope value not updating

updated object is not getting without using location.reload
Hi i will get list of objects from API where i have to update one value,After updating that value in modal popup i am not able to get new updated value without using location.reload. Is there any other solution for this.i am using two different controllers.
Will get list of objects from this
$scope.groups=response.data
will ng-repeat this groups where i will have edit button for every line,Once i click edit button popup will open
$scope.editGroup = function(u) {
$scope.groupName=u.groupName;
$scope.groupId=u.groupId;
ModalService.showModal({
templateUrl: 'app/components/modal/editGroupDetails.html',
controller: "ModalController",
scope: $scope
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {
$scope.message = "You said " + result;
});
});
};
Next once i edit the GroupName i will click submit
$scope.updateGroupName=function(){
var data={
"groupId": $scope.groupId,
"groupName": $scope.groupName
}
url=globalUrlConfig.globalAdminApi+globalUrlConfig.updateGroup+$scope.schoolId;
$http({
method: 'PUT',
url: url,
data: data,
}).success(function(response) {
console.log(response)
if(response._statusCode==200){
alert(response.data);
location.reload();
}
else{
alert("not updated")
}
})
}
Without using location.reload i am not able display updated data
Use $rootscope like this
Add this $rootScope.$emit("refreshData", {});
instead of Location.reload();
And then add this in your main controller for load data without refresh
var RefreshValue = $rootScope.$on("refreshData", function () {
GetValueMethod(); // call your method (List of object) for get data without reload form
});
$scope.$on('$destroy', RefreshValue);
Don't forget to inject $rootScope.

Getting the array value of angular ng-repeat

I have a list that looks like this:
Store 1
Section A
Section B
and so on...
Store 2
Section A
and so on...
So I open a modal window to create a new store. I return the store when I close the window, and so far that's working great!
<div ng-repeat="store in global.user.company2.store">
I need to push the callback store to $scope.global.user.company2.store[?]
modalInstance.result.then(function (newStore) {
// How do I get the IndexOf value of store?
// This is one of the stores in the ng-repeat
$scope.global.user.company2.store[???].section.push(newStore)
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
The way I'm sending a selected store into the modal is with resolve
$scope.createSection = function (size) {
var modalInstance = $modal.open({
templateUrl: 'createSection.html',
controller: 'SectionModal',
size: size,
resolve: {
items: function () {
// $scope.radio.model === store
// $scope.radio.model2 === section
return $scope.radio;
}
}
});
UPDATE: Here's a basic plunker http://plnkr.co/edit/UGN4niAO9nQETqhg8lxn
The radio model buttons aren't working. If you change resolve items to $scope.radio.model, the modal breaks. So I left it as is. I think maybe it has to do with the btn-radio being part of angular-ui-bootstrap?
When resolving your modal, box your returned object with the array index of the object.
For example:
$modalInstance.close({ radio: $scope.radio, index: $scope.items.indexOf($scope.radio) } );
Then, when resolving your modal's promise, simply unbox your object:
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem.radio;
$scope.selectedIndex = selectedItem.index;
}, function () {});
See the Angular-Bootstrap docs for more details.

How to send HTML email with AngularJS?

I am using a cordova email plugin in that works when I send simple text.
However, I am trying to instead use a template to construct the body of the email.
I thought $compile would do the trick so I created an on click function:
$scope.openShare = function (title,body) {
var templateURL = "templates/roi-email.html";
$http.get(templateURL).success(function(data, status, headers, config) {
var templateRendered = $compile( data )( $scope );
if(window.plugins && window.plugins.emailComposer) {
window.plugins.emailComposer.showEmailComposerWithCallback(function(result) {
console.log("Response -> " + result);
},
title, // Subject
templateRendered, // Body
[], // To
null, // CC
null, // BCC
true, // isHTML
null, // Attachments
null); // Attachment Data
}
However, templateRendered is not a string object. I think it is an mg-view object.
So how do covert the raw html in 'data' to a rendered string to i.e., templateRendered to pass to the email composer?
Use an angular element and don't forget to trigger the $apply on the used scope:
http://jsfiddle.net/coma/o63wvscn/
app.controller('Main', function($scope, $compile, $timeout) {
var scope = angular.extend($scope.$new(), {
user: {
email: 'foo#foo.com'
}
});
var email = angular.element('<div><p>{{ user.email }}</p></div>');
$compile(email)(scope);
scope.$apply();
alert(email.html());
});
$compile returns the DOM element; not a string. So you can access templateRendered.html() (jQuery) to get the content. However, as the doc says:
After linking the view is not updated until after a call to $digest
which typically is done by Angular automatically.
So you need to wait (or trigger one) for the current digest cycle to finish before you access templateRendered.html().
see a working example : http://plnkr.co/edit/cYsS1c7GbEVRP7RODHvx?p=preview

Struggling with my first 'in-depth' directive: an image/video gallery

I'm trying to build a relatively simple gallery as a directive so I can use it on a couple different templates on my site. Here' what I have so far. The item attr accepts a json object which will contain an 'images' array of objects, each with a url and a label. It also has an optional video property containing a youtube video id. I have a separate youtube embed directive already working that this gallery can use. The $scope.gallery object is intended to contain information about the current state of the gallery as well as functions to modify it. I'm having trouble accessing the item object from within my gallery object. I'm not sure that I'm using the linking function correctly.
app.directive('gallery', function () {
return {
restrict: 'E',
replace: true,
scope: {item: '='},
templateUrl: './app/directives/templates/gallery.html',
link: function ($scope, elem, attrs) {
// this works
console.log($scope);
/* this logs 'undefined' even though the
previous log shows a non empty item property */
console.log($scope.item);
$scope.gallery = {
currentImage: 0,
video: false,
/* I need to set count equal to the number
of images in a given item, but again can't access
$scope.item to see the images property */
count: 5,
next: function () {
if (this.video === true) {
if (this.currentImage < $scope.item.images.length) {
this.currentImage += 1;
}
} else {
if (this.currentImage < $scope.item.images.length -1) {
this.currentImage += 1;
}
}
},
previous: function () {
if (this.currentImage > 0) {
this.currentImage -= 1;
}
},
select: function (index) {
this.currentImage = index;
}
};
}
};
});
I assume that you use some Developer Tools like that of Chrome, right?
In the devtools, if you console.log() an object which is not a primitive value, it will be a dynamic presentation, that means the inner fields will be evaluated only when you read it. Instead, for a primitive value, including undefined, it will be printed as string immediately. When your code was run, $scope.item may have not got the object (sometimes the values are requested remotely right?). But that happened very soon after that. So this is why you can see item in $scope but $scope.item is undefined.
I would suggest that you change all this reference in your functions to $scope.gallery .

Resources