Databases
StackOverflow2013
Postsdbo
POAngularJS pass $resource as a directive parameter
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJS pass $resource as a directive parameter
    primarykey
    data
    text
    <p>I have just came up with a directive that loads a dropdown box according to a list coming from an API call ($resource).</p> <p>Controller:</p> <pre><code>App.controller( 'TestCtrl', [ '$scope', 'countriesFactory', function($scope, countriesFactory){ /* Call API */ countriesFactory().then(function(data){ $scope.countryList = data; }); }]) </code></pre> <p>The API call returns:</p> <pre><code>{"country":[{"code":"ABW","label":"Aruba"},{"code":"AFG","label":"Afghanistan"},{"code":"AGO","label":"Angola"}]} </code></pre> <p>Template:</p> <pre><code>&lt;input-select model-ref-list="countryList"&gt;&lt;/input-select&gt; </code></pre> <p>Directive:</p> <pre><code>App .directive("inputSelect" , function() { var Template = '&lt;select ng-options="item.label for item in modelRefList" required&gt;&lt;/select&gt;'; return { restrict: 'EA', template: Template, scope: { modelRefList: '=' }, link: function(scope){ console.log(scope.modelRefList); } }; } ); </code></pre> <p>First of all: I simplified a lot the overall issue, so that it looks that the directive is completely overkill in that situation, but in the end, it is not :D.</p> <p>Problem: My console.log is always undefined.</p> <p>I made a bit of research and realized that I needed to play with promises to wait for my country list to appear to be actually given to the directive. So I tried modifying my controller and not use the result of the API call promise, but directly the resource itself:</p> <p>New Controller:</p> <pre><code>App.controller( 'TestCtrl', [ '$scope', 'countriesFactory', function($scope, countriesFactory){ /* Call API */ $scope.countryList = resourceAPICall(); }]) </code></pre> <p>But still undefined :/.</p> <p>How can I pass direclty the resource (containing the promise I can then use to defer the load of the select) to the directive?</p> <p>SOLUTION FOR ANGULARJS 1.2:</p> <p>Directive:</p> <pre><code>App .directive("inputSelect" , function() { var Template = '&lt;select ng-options="item.label for item in modelRefList" required&gt;&lt;/select&gt;'; return { restrict: 'EA', template: Template, scope: { modelRefList: '=' }, link: function(scope){ scope.modelRefList.$promise.then(function(data){ console.log(data); } }; } ); </code></pre> <p>To pass a API call result to a directive, you need to pass its resource and play with its promise inside the directive itself.</p> <p>Thanks everybody for the help.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USVincentSerpoul
    1. USVincentSerpoul
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COIf you don't have any other logic in that directive, definitely it's overkill you can do the same just adding the template contents in the view.
      singulars
      1. POAngularJS pass $resource as a directive parameter
      1. USEverton Yoshitani
    2. COCan you provide `countriesFactory` or at least expected `countryList` you get
      singulars
      1. POAngularJS pass $resource as a directive parameter
      1. USMaxim Shoustin
    3. COWhere is `resourceAPICall` defined?
      singulars
      1. POAngularJS pass $resource as a directive parameter
      1. USMaxim Shoustin
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload