Re: [AngularJS] How to do a function call with ng-if or is it not possible?
That worked, thanks! So is this acceptable as a best practice or is there a better way to do this? James -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscr...@googlegroups.com. To post to this group, send email to angular@googlegroups.com. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
[AngularJS] How to do a function call with ng-if or is it not possible?
I'm new to angular 1x and I have some complicated display business logic
using multiple and nested ng-if statements that I had put into my web page,
just to get it working. It didn't pass the code review and the suggested
refactoring was to call a service to handle this. I created the service,
but was unable to call it directly from the view, which I understand is a
bad practice, so I put the call to the service in the controller as I
normally do and then called the $scope reference from the view similar to
what I have shown below:
I made the call to the service from a controller similar to this code:
$scope.functionName = serviceName.functionName($scope.paramOne);
and in the page I used:
The value is: {{functionName}}
//Then there is a call to a filter here to show another value.
When I tried to use this:
I got this error:
Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the
expression ...
So is my working code a best practice or is there a better solution? I
still need to have some display logic for showing/hiding the tag with
the value so this solution only cuts down on on the business logic in the
view, but now I don't have a way to show/hide the tag since I'm not
using ng-if or rather couldn't get it to work with the function call inside
of it.
Thanks for any help,
James
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
[AngularJS] Where did this pattern originate, using Two return statements with $http.post
I recently had a requirement to create a custom component that would make a
REST call to an API and then return data (a token) back. I'm working with
Angularjs 1.4.2.
So I created a custom directive that called a service to do this, however,
I kept failing to return the data back to the directive. All I would get
was a promise back, except within the context of the $http.post code in the
service and I was unable to get the value of the data from the promise.
The solution was to have two return calls from $http.post. My question is,
where is this documented? Maybe I'm just missing something here, but I
spent a lot of time on this for a solution and this was the only one I
could get to work. I never could find this in the Angular docs, but I have
missed some things before. The solution came due to help from another dev
who couldn't remember how they found this pattern.
Here is some of the code snippets:
//custom directive
$scope.login = function () {
var loginResponse = {};
var errorMessage = "";
var access_token = "";
loginService.login(myInfo).then(function(response) {
console.log("response is: " + JSON.stringify(response));
if(response.data.token) {
$window.sessionStorage.setItem("token", response.data.token);
}else{
errorMessage = response.data.errorMessage.split(":").pop();
console.log("errorMessage is: " + errorMessage);
... more code
//service
function loginService($window, $http, $httpParamSerializerJQLike) {
var service = {
login:login
};
return service;
function login(myInfo) {
... more code here
params = $httpParamSerializerJQLike(params);
console.log("The params are: " + params);
return $http({
url: baseURL,
method: 'POST',
data: params,
//Set the headers so Angular is passing information as form data, not
request payload.
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function onSuccess(response) {
return response;
}).catch(function onError(response) {
return response;
});
}
My questions are is this is a good pattern to use for this scenario and if
not, what is better? Again, I'd like to know who came up with the pattern
and where it's documented?.
Thank you,
James
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
[AngularJS] Re: Where did this pattern originate, using Two return statements with $http.post
Well I totally missed that! Yes I knew a little about promises, but didn't see where having two return statements fit in. In my code I'm returning the $http.post, (return $http) which it seems to be the promise object itself, and returning the response which contains the data in .the .then or.catch blocks). I didn't see that documented in angular until I just now saw this: https://docs.angularjs.org/api/ng/service/$q. Thank you, James -- You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group. To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscr...@googlegroups.com. To post to this group, send email to angular@googlegroups.com. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
[AngularJS] Re: How to redirect to another domain from $http.post success callback?
This is more involved than I first thought. Here is an overview of what I'm trying to accomplish. My original call to a restful login API returns a token, then I dynamically create a return url from another service function and then I need to redirect to an external URL outside of the current domain. After reading I found that for external URL redirects you use $window.location.href, but in this use case I have to send the token from the previous service call. So since I need to set a header, I use $http request. So how do I do this with $window.location.href ? I also don't want to set up headers in the config as I only need to set the header for this particular call to the external URL. I have to think others have run into this use case, but I'm not finding a good solution for this. -- You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group. To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscr...@googlegroups.com. To post to this group, send email to angular@googlegroups.com. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
[AngularJS] How to redirect to another domain from $http.post success callback?
I'm using Angularjs 1.4.2 and I need to redirect to another URL after
$http.post success callback. I know I can use something like:
$window.location.href = "http://google.com;, but in this case
I think need to call a function in the service from the custom directive to
get the URL dynamically.
//custom directive
$scope.login = function () {
var loginResponse = {};
var errorMessage = "";
var access_token = "";
loginService.login(myInfo).then(function(response) {
console.log("response is: " + JSON.stringify(response));
if(response.data.token) {
$window.sessionStorage.setItem("token", response.data.token);
//Do I make the call from here?
$window.location.href = loginService.getURL();
}else{
errorMessage = response.data.errorMessage.split(":").pop();
console.log("errorMessage is: " + errorMessage);
... more code
So, is this a bad practice the way I'm trying to implement it?
Thank you,
James
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
[AngularJS] Re: How to redirect to another domain from $http.post success callback?
Okay, well it seemed different to me, but it is in the requirement. Thank you, James -- You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group. To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscr...@googlegroups.com. To post to this group, send email to angular@googlegroups.com. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
[AngularJS] Two controllers syntax for a custom directive?
I have a custom directive that uses a modal dialog ($mdDialog) with a
submit button to call some services. All of the code is working, but when
it gets minified I get the "Unknown provider: aProvider <- a " error
message. After trying to find where this could be in the code, I realized
that we always use the controllerName.$inject(param a, param b, etc...)
format with function controllerName(param a, param b, etc...), so I didn't
think it was the common cause for the error. Not using the array notation.
However, when I commented out my new controller directive reference in the
template, the error went away, so I was convinced that was where the issue
was.
Here is some similar code for the custom directive:
(function () {
'use strict';
angular
.module('myApp')
.directive('myLogin', myLogin);
function myLogin() {
var myLoginDirective = {
template: 'Login',
restrict: 'E',
controller: myLoginCtrl
};
return myLoginDirective;
myLoginCtrl.$inject = ['$scope', '$mdDialog'];
/* @ngInject */
function myLoginCtrl($scope, $mdDialog) {
$scope.openLogin = function () {
$mdDialog.show({
templateUrl: 'components/myLogin/myLogin.html',
controller: myLoginModalCtrl,
bindToController: true,
clickOutsideToClose: true
});
}
}
myLoginModalCtrl.$inject = [''$scope', '$window', '$mdDialog',
'myLoginService''];
function myLoginModalCtrl($scope, $window, $mdDialog, myLoginService,) {
more code here...
Since I was using a directive controller and a controller for the modal,
having two directives in the controller works, but I'm thinking that this
could be the cause of the minification error, although I'm guessing. Is
this the correct syntax and could it cause a minify error?
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
