Jeremy Belolo | 13 Nov 10:52 2014
Picon

AngularJS and GeoFire - wait for response from factory

Hello all,

I'm starting to learn a lot of things related to the hybrid apps coding. I decided to go on and use Ionic framework, based on AngularJS (this gives me the occasion to learn it), and use Firebase as my backend solution.

I want to setup a map in my app, so I would locate the user and some points of interests around him. I found out GeoFire existed, so I started working with it.

My problem : I fail in displaying a user's location saved into Firebase. I query it using GeoFire, and get the response (console.log it) but it won't update the scope variable.

Here is the JS code :


myApp.factory("MyLoc", function(){
   
var firebaseRef = new Firebase("https://myfirebase.firebaseio.com/geofire/");
   
var geoFire = new GeoFire(firebaseRef);

   
/*    geoFire.set("user_loc", [37.785326, -122.405696]).then(function() {
     console.log("Provided key has been added to GeoFire");
     }, function(error) {
     console.log("Error: " + error);
     });*/


     
return geoFire.get("user_loc").then(function(location) {
       
if (location === null) {
            console
.log("Provided key is not in GeoFire");
           
return 0;
       
}
       
else {
            console
.log("Provided key has a location of " + location);
           
return location;
       
}
   
}, function(error) {
        console
.log("Error: " + error);
       
return 0;
   
});
})

myApp
.controller("firstCtrl", function($scope, MyLoc) {
    $scope
.data = {};

    $scope
.data.myLoc = MyLoc;
});

The HTML just displays it :


{{data.myLoc}}

Since I'm an Angular N00b, I guess I'm missing something obvious. I guess I should use a promise or something similar, just can't figure out how ! Can someone help me, please ? :)

Thank you very much bros !

--
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+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
Chris Geir*** | 13 Nov 07:25 2014
Picon

ng-repeat math mystery

I'm a n00b, just playing around, but I can't for the life of me make sense of what's going on here. 

In my app.js, I have the following declaration in my controller...
$scope.cells = [0,1,2,3,4,5,6,7,8,9];

In my html file, I have the following table (the interesting bit is highlighted)
<table>
<tr><th ng-repeat="cell in cells">[[ cell ]]</th></tr>
<tr ng-repeat="cell in cells">
<td ng-repeat="cell in cells">[[ cell=cell+2 ]]</td>
</tr>
</table>

And here's the output...

0      1      2      3      4      5      6      7      8      9
22     23     24     25     26     27     28     29     30     31
22     23     24     25     26     27     28     29     30     31
22     23     24     25     26     27     28     29     30     31
22     23     24     25     26     27     28     29     30     31
22     23     24     25     26     27     28     29     30     31
22     23     24     25     26     27     28     29     30     31
22     23     24     25     26     27     28     29     30     31
22     23     24     25     26     27     28     29     30     31
22     23     24     25     26     27     28     29     30     31

I'm not sure what to make of the output. Totally not what I expected. Does anyone know how to make sense of it? 

--
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+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
Kevin W | 13 Nov 06:57 2014

routing + long pages is not behaving as expected

When using routing and ng-view to swap out the content being displayed, I expected (based on the documentation) the browser to scroll back to the top whenever navigation occurs.

However, that's not happening.  I have a simple plunkr that I created to show the behavior that I do NOT want:


When you scroll down in the text to find the button, and click the button, notice how the scroll position stays about the same... in the middle of the NEW content.

I expect it to scroll back to the top.

Am I missing a configuration to tell angular to behave this way?

Thanks,
Kevin

--
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+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
KamBha | 13 Nov 04:32 2014
Picon

Directive not called when compiled in

Hi,
I am creating a directive that is adding another directive that looks at ngModel and adds another directive based on the value of ngModel.  The link below is an example.  This works fine as long as the input in question does not belong to a repeating value.  I can see the directive does get called, but the work is getting wiped by something else.

http://plnkr.co/edit/XpRpdl4fJVxsdgmBqIjl?p=preview

Any ideas what I am missing?

Thanks.

Kamal.

--
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+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
Joshua Barker | 12 Nov 21:56 2014
Picon

De-Registering an event listener on $scope $destory prevents subseqent listeners for same event from being re-attached

I am working on integrating Google maps into our Angular website.

I am attempting to use $rootScope.$emit() and $rootScope.$on() to broadcast whenever a new search is performed and the map has to be reset / recreated.

The $emit("NewSearchSuccess") is triggered within our search form controller on a successful $http POST.  The $on("NewSearchSuccesss") is handled within the page controller containing the map.

This works fine in general, but I recently tried adding some clean-up code based on some stuff I read about using the $destroy event to prevent memory leaks by de-registering listeners and cancelling timeouts.

However, when I use the de-registration callback function returned by $on() during the $destory event, and then on a subsequent page view attempt to re-add the same event listener, the listener is never called after the corresponding $emit() message is broadcast.  Removing the call to the de-registration function fixes this.

Is this a bug?  I assumed that de-registering and then re-registering an event listener was the correct way to handle this type of cleanup (simlar to $timeout.cancel), but ultimately it does not seem to work.  Here is some example code:

SearchController.js
$scope.Search = function ()
{
    return searchService.GetListings().then(function (response)
    {
        $rootScope.$emit(siteConfig.events.NewSearchSuccess);

        //... other code omitted for brevity ...
    });
};

GalleryController.js
var _detachNewSearchSuccessListener = $rootScope.$on(siteConfig.events.NewSearchSuccess, function()
{
    googleMapService.deleteMapContext($scope.PageContext);
});

$scope.$on("$destroy", function ()
{
    $timeout.cancel(_timeout);
    //_detachNewSearchSuccessListener();  //<-- including this causes the listener above to not work the next time the GalleryController is loaded...
});

Does anyone have any ideas why this is not working or how I should be handling this properly?

Thanks!

Josh

--
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+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
lmisincle | 12 Nov 21:12 2014
Picon

Reusable wiggets

Hi

I want to use Angular JS to organize my code but I also want to use existing widgets were written in JavaScript.
For example, MyTable widget so I want to use it (usage: new MyTable()) instead of ng-table and bootstrap css.
How do I write a directive that wrap around my existing widget.  thanks.

--
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+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
Brice Burgess | 12 Nov 18:56 2014
Picon

interpolated attribute values / generic ngAttr directive?

Is it possible to use interpolated attribute values that register during the compile phase? I'm trying to use an interpolated value in an angular-material project like so:

<section ng-controller="MainController as main"> <md-button ng-click="main.ToggleNav()">Show Nav</md-button> <md-sidenav component-id="{{ main.NavID }}"> <md-toolbar> ... </md-toolbar> </md-sidenav> </section> <script type="text/javascript"> app.controller('MainController', ['$mdSidenav', function($mdSidenav) { this.NavID = 'main-nav'; this.ToggleNav = function() { $mdSidenav(this.NavID).toggle(); } }]); </script>

When executed -- I get:

No instance found for handle" "main-nav"
Obviously the component-id attribute is being registered as "{{ main.NavID }}" and not the substituted value.

I've been away from Angular for quite some time -- is there perhaps a generic ngAttr directive that's similar to ngHref / ngSrc but more flexible?

Many thanks,

~ Brice


--
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+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
Pascal | 12 Nov 15:34 2014
Picon

Comparison of the currently most relevant Tables/Grids for AngularJS

Good day everyone, 

For the project I work on, we are looking for a replacement for a self-developed tableview. 
At the time when we started the project there wasn't many tables developed for/in Angular however things have moved since then
and there are several options around.

Looking around the web, I found the following tables which seem to be the most prominent at the moment:


The main requirements for our use-case are:
+ The obvious ones... Sorting, pagination, filtering, searching
+ Search result highlighting
+ Resizable columns
+ Hide/show columns (bonus if it can natively save the displayed column in local storage)
+ Draggable columns (bonus if it can natively save the column order in local storage)

That being said, I have the following questions for you all:

* Are there any other relevant, well established, table frameworks for Angular that I am missing from my list above?

* Has anyone seen a comparison of the features of these various frameworks which would help us make a decision on which framework to use?

I would love to hear about any good or bad experiences using tables in Angular!

Thanks much!
pascal

--
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+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
vivek | 12 Nov 13:16 2014

Do not load HTML page untill data is arrived from the controller

Hi,

On page load, I'm calling a controller, in which im getting data from HTTP POST service mentioned below

But as a result a page will be loaded and later after a while(1min) data will be populated into the page. I want it to be avoided as wait until data is arrived from the controller and then load the page.

My code
HTML contents:

<div id="scroller" data-ng-controller="myCtrl" data-ng-init="init()">
  <div ng-repeat="x in variable "> 
<ul>
  <li class="strong" >{{ x.shortMsg }}</li>
  <li class="content">{{ x.validity }}<br /></li>
 <li  class="icon"><img src="{{ x.image }}"</li>
</ul>
</div>
       
            </div>

Script contents:

function myCtrl($scope, $window,$http) {
    $scope.variable = "Hello";
    alert("calculaing data.. please wait");
   
    $scope.init = function () {

      alert($scope.variable)
     $http({
             method: 'POST', url: '/citibank/compressedDetails',
             data: $scope.variable
           }).
             success(function(data, status, headers, config) {
              // $window.location.replace('./confirm.html');
              $scope.variable=data;
             // $scope.firstName=data;
             }).
            
    };
   
}



--
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+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
Swarup Dukuria | 12 Nov 13:03 2014
Picon

Protractor: Button click not working on Internet Explorer but works on Chrome and Firefox

Hello Everyone,

I am 4 weeks into Protractor and writing tests on an Angular JS application. It's a login page with text box for username and password and a button which is disabled until values are entered into the text boxes.

The html part of button is :

<div class="btn-group clear">
<button type="submit" ng-disabled="LoginForm.username.$pristine || LoginForm.password.$pristine || (!LoginForm.username.$pristine && LoginForm.username.$invalid) || (!LoginForm.password.$pristine && LoginForm.password.$invalid)" class="btn btn-default">Login</button>
</div>

The code to identify the button is :

var logInButton = element(by.css('[class="btn btn-default"]'));logInButton.click();

My issue here is, this button click works perfectly fine on Chrome and FireFox, latest version. But fails on IE 11.

I have tried different ways by taking id, css but nothing is working on IE.

Can some one please help?

Thanks,
Swarup

--
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+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
John Chacko | 12 Nov 11:13 2014
Picon

$scope update in service or controller

a newbie question.

making a server call via a service and want to know where to update $scope. 
In controller or in service?
Boths works. 



<input type="text" name="queryFor" ng-keyup="query()" ng-model="queryFor"/>
<div ng-repeat="result in results">{{ result.title }}</div>



1. In controller.
myApp..controller('Controller', function($scope, dataService) {
    $scope
.results = [];
    $scope
.queryFor = "";
    $scope
.query = function() {
        dataService
.query($scope.queryFor).success(function(data, status, headers, config) {
                $scope
.results = data.results;
           
});
   
};
})



myApp.factory('dataService', ['$http', function($http) {
   
var dataService = {
        query
: function(queryFor) {
            $http
.get('http://www.example.com/search.php?queryfor=' + encodeURI(queryFor));
           
return null;
       
}
   
};
   
return dataService;
}]);


2. In service

myApp..controller('Controller', function($scope, dataService) {
    $scope
.results = [];
    $scope
.queryFor = "";
    $scope
.query = function() {
        dataService
.query($scope);
   
};
})


myApp.factory('dataService', ['$http', function($http) {
   
var dataService = {
        query
: function($scope) {
            $http
.get('http://www.example.com/search.php?queryfor=' + encodeURI($scope.queryFor)).success(function(data, status, headers, config) {
                $scope
.results = data.results;
           
});
           
return null;
       
}
   
};
   
return dataService;
}]);

--
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+unsubscribe <at> googlegroups.com.
To post to this group, send email to angular <at> googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Gmane