ADL | 9 Apr 21:14 2014

Does Directives load faster than my .query and API calls? Please help!!! I have a feeling I am doing something silly.

I am using an API to load (Data) to my $scope resource, and I took an example from a directive online to create a treeview. Recursive Tree View Example

However I am changing a few things to load data from an API. Please note the commented data... when I uncomment my data everything works great, however when I use $scope.treeFamily = TreeView.query() I think there is a delay between the directive executing and me getting no data. Any insight will be helpful. Thank you!

var module = angular.module("module", ["ngResource", "ngRoute"]); module.factory('TreeView', function ($resource) { return $resource('/api/TreeView/:Id', {}, { show: { method: 'GET', isArray: true }, update: { method: 'PUT', params: { id: ' <at> id' } }, delete: { method: 'DELETE', params: { id: ' <at> id' } } }) }); module.controller('TreeCtrl', function ($scope, TreeView) { $scope.treeFamily = TreeView.query(); //$scope.treeFamily = { // name: "Parent", // children: [{ // name: "Child1", // children: [{ // name: "Grandchild1", // children: [] // }, { // name: "Grandchild2", // children: [] // }, { // name: "Grandchild3", // children: [] // }] // }, { // name: "Child2", // children: [] // }] //}; }); module.factory('RecursionHelper', ['$compile', function ($compile) { var RecursionHelper = { compile: function (element) { var contents = element.contents().remove(); var compiledContents; return function (scope, element) { if (!compiledContents) { compiledContents = $compile(contents); } compiledContents(scope, function (clone) { element.append(clone); }); }; } }; return RecursionHelper; }]); module.directive("tree", function (RecursionHelper) { return { restrict: "E", scope: { family: '=' }, template: '<p>{{ family.name }}</p>' + '<ul>' + '<li ng-repeat="child in family.children">' + '<tree family="child"></tree>' + '</li>' + '</ul>', compile: function (element) { return RecursionHelper.compile(element); } }; });

The Result from what i get there using the following HTML.

<!DOCTYPE html> <html lang="en" ng-app="module"> <head> <title></title> </head> <body> <div class="container"> <div ng-controller="TreeCtrl"> <table> <tr> <th>Name</th> </tr> <tr ng-repeat="result in treeFamily"> <td> From Table: {{result.name}}</td> </tr> </table> <tree family="treeFamily"></tree> </div> <div ng-view=""></div> </div>

Result : Name From Table: Parent

HOWEVER, this is from the the ng-repeat within my table, so i know the API is sending DATA and it is readable.

{ ID: "1", type: "Folder", name: "Parent", children: [] }

The problem is that it seems that the directive is not loading this data.... If however uncomment the built in data I have for that scope it works fine...

I have a feeling that my directive is loading faster than my API call so I get no data. Am i doing something wrong?

Any help will be appreciated!

--
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.
Mike Leong | 9 Apr 20:43 2014
Picon

Trying to use ngcloak on filtered text

Im trying to cloak some text that is filtered with a i18n filter i have but i read somewhere that ngcloak may have been completed before the filter is done.

    <p ng-if="errors" class="instructions error" ng-bind="something:credentials' | i18next" ng-cloak></p>


any suggestions to fix this?

--
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.
cutey Love | 9 Apr 15:29 2014
Picon

Looking For Some Advice

Hi Everyone,
 
I'm looking for some advice before creating an app.
 
Essentially my app has hotel listings then I need a live calculator that returns the number of hotels that meet the criteria.
 
So sliders with information like number of rooms, number of people staying, hotel location.
 
There are about 15,000 listings.
 
They are in MySQL and will be outputted by php -> Json.
 
Now am I best to:
 
1. Download all 15,000 listings on load and then use angular filters etc to sort the data and return the number that match.
 
2. Send a query and have php generate the Json that matches the criteria, run it in MySQL and then return the number of records.
 
3. Another way?
 
All of this needs to be live and as quickly as possible, so as a slider moves, new number is generated.
 
Thanks any advice would be great.
 
 
 
 

--
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.
Nicola G. | 9 Apr 15:11 2014
Picon

SVG Manipulation and data visualization. Is AngularJS and two-binding the right choice?

Hi everyone, I am very active with AngularJS as well as with D3.

I find fascinating the way Angular simplifies stages of development. What is interesting is that I can write straight away some logic into the HTML.

I have been recently applied AngularJS to SVG. I can therefore bind a variable to the starting or the ending point of a line, the thickness of the stroke and what color should I feel a rect. In addition with CSS 3 I can smooth all the movement and transitions. So to the question, can I use AngularJS for simple SVG manipulation, the answer is yes, and it is as well very easy (even though at the moment I am playing very low level svg manipulation).

Now, D3 is a very great library, however given the potentiality of using straight Angular+SVG, I start to doubt what can I really do more with D3? Going in the angular way, I don't need to do any binding of data with d3 and visualisations, I don't need to trigger any transformations and I don't have to use any selector to find the doms to edit. So with Angular+SVG I am a very little step away to use it instead of D3.

What scares me is performances. When I have over 2.000 points to plot and to edit, how would AngularJS perform on that? Is Angular suited for this job? Am I stretching too much what angular is meant for? Is straight manipulation of DOMs that D3 does, more suitable and therefore not replaceable by Angular? Can AngularJS change the way we do Data Visualisation with simplify the d3 way?

Thanks,
n

--
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.
Marc B | 9 Apr 15:04 2014
Picon

Custom Directives: how to use compile() for DOM-insertion and link() for data-binding

Hi,

I made a directive 'draggable' to drag a div -element (duh...). What is does is:

1) prepend a title-bar to the element with a (x) allowing to close te element-window
2) make the element draggable.

This works fine. I have a q about refactoring:

Currently insertion of the title-bar is performed by the link function. No big deal since there is only 1 element to manipulate by the directive. But the Angular way says DOM manipulation should be done by the compile function, not by link. So my q is: how can I transform my current directive, containing just a link function, to a directive that has a compile function and a link function? The compile function should prepend a template to the element, the link function should just make the element draggable. I have this code (abbreviated for clarity)

.directive('draggable',function(){
        return{
            restrict: 'A',
            transclude: true,
            replace: false,
            template: '<div><div style="width:100%; height:20px; background-color:#ccc; border-radius:10px;"><span class="glyphicon glyphicon-remove-circle" style="float:right;font-size:1.5em;" ng-click="show=false"></span></div><div ng-transclude></div></div>',
            link: function(scope,element,attrs){
                $(element.context).on('mousedown',handleMousedown);
                [...]
}

This setup works - it prepends a titlebar to the element and the element is draggable. Just want to know how to refactor.

Thanks,

Marc

--
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.
Steve Wagner | 9 Apr 13:09 2014
Picon

$digest() iterations reached. Aborting! with apply every second

Hi, we have develop an application which gets and displays a lot sensor data (100-500 events per second).

Since it make no sens to update the UI on every event, we decided to call apply instead every second on a daily base. This worked very well until we started using a filter. The filter dose nothing special, it only gets a timestamp as input and outputs it in a human readable string. Since we add it, we getting a lot of
"[$rootScope:infdig] 10 $digest() iterations reached. Aborting!" errors. But the filter works.

So how to prevent the "10 $digest() iterations reached" errors in our case? And whats exactly the problem (read the docs, but dosen't got yet what happens there).

--
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.
aveinfosys | 9 Apr 12:35 2014
Picon

Best Responsive and Mobile Web Designing Services in INDIA USA UK CANADA SINGAPORE

Ave Infosys is a leading professional in Web Designing Company in Hyderabad India for the

E-Business Industry.Ave Infosys are providing Best Website Development and Design Services

in Hyderabad.Our company offers the Best Web Design & Development services, Web

Hosting,Responsive and Mobile Web Designing services. We have intensive web design and web

skills merging with the quality essence of expertise should have component to help you to

ascertain your internet presence or take it to the next level.we are the Best Web Design

Company in Hyderabad.

For More Details :

Please contact: (+91) 40 40275321

Email : info <at> aveinfosys.com

web : http://aveinfosys.com/responsive-and-mobile-design

--
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.
aveinfosys | 9 Apr 12:33 2014
Picon

Best Responsive and Mobile Web Designing Services in INDIA USA UK CANADA SINGAPORE

Ave Infosys is a leading professional in Web Designing Company in Hyderabad India for the

E-Business Industry.Ave Infosys are providing Best Website Development and Design Services

in Hyderabad.Our company offers the Best Web Design & Development services, Web

Hosting,Responsive and Mobile Web Designing services. We have intensive web design and web

skills merging with the quality essence of expertise should have component to help you to

ascertain your internet presence or take it to the next level.we are the Best Web Design

Company in Hyderabad.

For More Details :

Please contact: (+91) 40 40275321

Email : info <at> aveinfosys.com

web : http://aveinfosys.com/responsive-and-mobile-design

--
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.
Ashraff Syed | 9 Apr 08:16 2014
Picon

Re: directive problem (ng-model) - try to create radiogroup with ng-repeat and input type="radio"

Hi Martin,

You can use ng-model inside the directive as follows:

Directive:
myApp.directive('radioChoice', function(){
    return{
    restrict : 'AE',
    scope : {
        model : '=',
        list : '='
    },
    template : '<p ng-repeat="text in list" style="float:left;"><input type="radio"'
        + 'ng-model="$parent.model" value="{{text}}">{{text}}</p>'
    };
});

HTML:
<div radio-choice list="radioList" model="radio"></div>

controller:
$scope.radioList = ['Option1','Option2','Option2'];

The trick here is using $parent.model, so that the selected value is stored in the variable "radio".


On Tuesday, December 11, 2012 8:36:31 AM UTC-6, Martin Kuhn wrote:
Hi,

I would like to create a directive for a radio group. It uses ng-repeat and input elements of type="radio".

But I have no idea how to define ng-model for this directive so that 2-way databinding is working. 

Here is my fiddle: http://jsfiddle.net/maku/xVKcr/ (it shows a code fragment with directive and without)

Can anybody of you give me a hint?

TIA
Martin

--
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.
dev0x10 | 9 Apr 03:44 2014
Picon

Loading CSS and JS Properly

I wonder how to load CSS and JS on demand or per partial? Because for now I 
load all the JS and CSS on the main HTML file.
I found about lazy load CSS but is there any better way?

abe | 9 Apr 02:27 2014
Picon

functionality of angular directive before return and compile chain

It is possible to run javascript in a directive before returning anything, as well as in a directive's compile step before returning anything:

        angular.module('foo').directive('fooDirective', [function(){
      console.debug('before return');
      return {
        restrict: 'E',
        controller: function($scope){
          console.debug('controller');
        },
        compile: function(scope, elem){
          console.debug('compile');
          return {
            pre: function(scope,elem, attr){
              console.debug('pre');
            },
            post: function(scope,elem,attr){
              console.debug('post');
            }
          }
        }
      }
    }]);

      <body ng-app="foo">
        <foo-directive></foo-directive>
        <foo-directive></foo-directive>
      </body>

This produces the following console log order:

    before return 
    compile 
    controller 
    pre 
    post 
    before return 
    compile
    compile 
    controller
    pre 
    post 
    controller 
    pre 
    post 

I have several questions about this:

1) Why would I ever want to run code before returning the actual directive object? What would be a usecase?

2) Why would I ever want to run code before returning the pre/post link functions? How is the prelink step different from the compile step? What is a use case?

3) Why does compile run twice in succession when there is two items, while everything else runs iteratively in the same order irrelevantly of number of elements?

4) Why does everything except "before return" run three times? Shouldn't everything only run twice? 

5) (Corollary to 4 really) Why does before return only run twice?

Plunk: http://plnkr.co/edit/1JPYLcPlMerXlwr0GnND?p=preview

--
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