In Angular how to pass JSON object array into directive

Question

Currently  my app has a controller that takes in a JSON file then iterates through them using  ng-repeat   This is all working great  but I also have a directive that needs to iterate through the same JSON file  This is posing a problem as I cannot request the same JSON file twice on one page  nor would I want to because it would be inefficient   Both the directive and controller request and iterate through the JSON data just fine if I change the filename of one of the JSON files   What I m wondering is  what s the best way to go about passing the array formed from my controller s JSON request into the directive  How can I pass the array into my directive and iterate through when I ve already accessed it via my controller   Controller  appControllers controller  dummyCtrl   function   scope   http        http get  locations locations json   success function data           scope locations   data               HTML   lt ul class  list  gt      lt li ng-repeat  location in locations  gt         lt a href     gt   location id      location name   lt  a gt      lt  li gt   lt  ul gt   lt map gt  lt  map gt    executes a js library   Directive  Works when I use a file name besides locations json  since I ve already requested it once   directive  map   function  http       return        restrict   E        replace  true       template    lt div gt  lt  div gt         link  function scope  element  attrs      http get  locations locations json   success function data       angular forEach data locations  function location  key          do something

User · Answer

As you say  you don t need to request the file twice  Pass it from your controller to your directive  Assuming you use the directive inside the scope of the controller    controller  MyController      scope     http   function  scope   http       http get  locations locations json   success function data           scope locations   data            Then in your HTML  where you call upon the directive    Note  locations is a reference to your controllers  scope locations    lt div my-directive location-data  locations  gt  lt  div gt    And finally in your directive      scope      locationData    locationData     controller     scope   function  scope        And here you can access your data    scope locationData          This is just an outline to point you in the right direction  so it s incomplete and not tested

User · Answer

If you want to follow all the  best practices   there s a few things I d recommend  some of which are touched on in other answers and comments to this question     First  while it doesn t have too much of an affect on the specific question you asked  you did mention efficiency  and the best way to handle shared data in your application is to factor it out into a service   I would personally recommend embracing AngularJS s promise system  which will make your asynchronous services more composable compared to raw callbacks  Luckily  Angular s  http service already uses them under the hood  Here s a service that will return a promise that resolves to the data from the JSON file  calling the service more than once will not cause a second HTTP request   app factory  locations   function  http      var promise   null     return function         if  promise             If we ve already asked for this data once           return the promise that already exists        return promise        else         promise    http get  locations locations json          return promise                     As far as getting the data into your directive  it s important to remember that directives are designed to abstract generic DOM manipulation  you should not inject them with application-specific services  In this case  it would be tempting to simply inject the locations service into the directive  but this couples the directive to that service      A brief aside on code modularity  a directive   s functions should almost never be responsible for getting or formatting their own data   There   s nothing to stop you from using the  http service from within a directive  but this is almost always the wrong thing to do   Writing a controller to use  http is the right way to do it  A directive already touches a DOM element  which is a very complex object and is difficult to stub out for testing   Adding network I O to the mix makes your code that much more difficult to understand and that much more difficult to test  In addition  network I O locks in the way that your directive will get its data     maybe in some other place you   ll want to have this directive receive data from a socket or take in preloaded data   Your directive should either take data in as an attribute through scope  eval and or have a controller to handle acquiring and storing the data       - The 80 20 Guide to Writing AngularJS Directives   In this specific case  you should place the appropriate data on your controller s scope and share it with the directive via an attribute   app controller  SomeController   function  scope  locations      locations   success function data         scope locations   data               lt ul class  list  gt      lt li ng-repeat  location in locations  gt         lt a href     gt   location id      location name   lt  a gt      lt  li gt   lt  ul gt   lt map locations  locations  gt  lt  map gt    app directive  map   function       return       restrict   E       replace  true      template    lt div gt  lt  div gt        scope             creates a scope variable in your directive          called  locations  bound to whatever was passed          in via the  locations  attribute in the DOM       locations    locations             link  function scope  element  attrs          scope  watch  locations   function locations            angular forEach locations  function location  key                 do something                                        In this way  the map directive can be used with any set of location data--the directive is not hard-coded to use a specific set of data  and simply linking the directive by including it in the DOM will not fire off random HTTP requests

User · Answer

What you need is properly a service    factory  DataLayer      http        function  http             var factory               var locations           factory getLocations   function success                if locations                   success locations                   return                             http get  locations locations json   success function data                    locations   data                  success locations                                       return factory              The locations would be cached in the service which worked as singleton model  This is the right way to fetch data   Use this service DataLayer in your controller and directive is ok as following   appControllers controller  dummyCtrl   function   scope  DataLayer        DataLayer getLocations function data            scope locations   data                directive  map   function DataLayer        return           restrict   E           replace  true          template    lt div gt  lt  div gt            link  function scope  element  attrs                 DataLayer getLocations function data                    angular forEach data  function location  key                         do something

[javascript] In Angular, how to pass JSON object/array into directive?

Examples related to javascript

Examples related to json

Examples related to angularjs

Examples related to angularjs-directive

Examples related to angularjs-ng-repeat