pass array of data from controller to custom directive?

Question

Im trying to pass a array of objects from a angular controller to a custom directive element and iterate the object with ng-repeat, but i am not getting data .

$scope.mydata=[


    {
        "_id":"1",
        displayConfig:[
              {
      "fieldIndex": 2,
"propertyName": "o1",
"propertyValue": "sree"
              },{
      "fieldIndex": 2,
"propertyName": "o2",
"propertyValue": "sravs"
              },{
      "fieldIndex": 2,
"propertyName": "o3",
"propertyValue": "sree"
              },

          ],
        "name": "Alabama",
        "abbreviation": "AL"


    },
    {
        "_id":"2",
        displayConfig:[
              {
      "fieldIndex": 2,
"propertyName": "o1",
"propertyValue": "yui"
              },{
      "fieldIndex": 2,
"propertyName": "o2",
"propertyValue": "juim"
              },{
      "fieldIndex": 2,
"propertyName": "o3",
"propertyValue": "aww"
              },

          ],
        "name": "Alaska",
        "abbreviation": "AK"
    },
    {
        "_id":"3",
        displayConfig:[
              {
      "fieldIndex": 2,
"propertyName": "o1",
"propertyValue": "fgt"
              },{
      "fieldIndex": 2,
"propertyName": "o2",
"propertyValue": "ertyu"
              },{
      "fieldIndex": 2,
"propertyName": "o3",
"propertyValue": "ghytt"
              },

          ],

        "name": "bmerican Samoa",
        "abbreviation": "AS"
    },
    {
        "_id":"4",
        displayConfig:[
              {
      "fieldIndex": 2,
"propertyName": "o1",
"propertyValue": "hjjhu"
              },{
      "fieldIndex": 2,
"propertyName": "o2",
"propertyValue": "rdrer"
              },{
      "fieldIndex": 2,
"propertyName": "o3",
"propertyValue": "xds"
              },

          ],
        "name": "drizona",
        "abbreviation": "AZ"
    },
    {
        "_id":"5",
        displayConfig:[
              {
      "fieldIndex": 2,
"propertyName": "o1",
"propertyValue": "errrr"
              },{
      "fieldIndex": 2,
"propertyName": "o2",
"propertyValue": "ddd"
              },{
      "fieldIndex": 2,
"propertyName": "o3",
"propertyValue": "nnnn"
              },

          ],
        "name": "crkansas",
        "abbreviation": "AR"
    }

];

html file...........

<search items="mydata" prompt="Start typing a US state" title="mydata.displayConfig[0].propertyName" subtitle="abbreviation" id="_id" model="_id" on-selectupdate="onItemSelected()" />

directive.js

.directive('search', function($timeout) {
  return {
    restrict: 'AEC',
    scope: {
        items: '=',
        prompt:'@',
        title: '@',
        subtitle:'@',
        model: '=',
        onSelectupdate:'&'
    },
    link:function(scope,elem,attrs){
       scope.handleSelection=function(selectedItem){
         scope.model=selectedItem;
           console.warn(scope.items);
         scope.current=0;
         scope.selected=true;        
         $timeout(function(){
             scope.onSelectupdate();
          },200);
      };
      scope.current=0;
      scope.selected=true;
      scope.isCurrent=function(index){
         return scope.current==index;
      };
      scope.setCurrent=function(index){
         scope.current=index;
      };
    },
templateUrl : TAPPLENT_CONFIG.HTML_ENDPOINT[0]+'home/genericsearch.html'  }
})

genericsearch.html

<div class="multitext-wrap blue-border">
<input type="text" ng-model="model"  ng-keydown="selected=false"/><br/> 
<div class="items" ng-hide="!model.length || selected">
    <div class="item" ng-repeat="item in items" ng-click="handleSelection(item[title])" style="cursor:pointer" ng-class="{active:isCurrent($index)}" ng-mouseenter="setCurrent($index)">
        <p class=" tag-label">{{item[title]}}</p><span class="tag-cross pointer" ng-click="removeOrg($index);">x</span>

    </div>
</div> 
</div>

please help to solve this problem. thanks in advance

How you are passing the title is wrong, you can't access a property value using a multi level string value — Arun P Johny
– Arun P Johny, Commented Apr 27, 2015 at 7:55
are you trying to create a general purpose search directive... jsfiddle.net/arunpjohny/mgm7cta8/2 - if you type something in the textfield you can see some X marks — Arun P Johny
– Arun P Johny, Commented Apr 27, 2015 at 7:56
thanks for the reply. then how can i get the property value in ng-repeat. no console errors. — harrini
– harrini, Commented Apr 27, 2015 at 7:58
Maybe it's hidden ? You have ng-hide="!model.length || selected" — Omri Aharon
– Omri Aharon, Commented Apr 27, 2015 at 7:58

Community · Accepted Answer · 2017-05-23 12:15:43Z

1

You can access it in your link function via attrs:

function(scope,elem,attrs)
{  
 var mydata = attrs.model; 
}

But something feels wrong with your way to do it. I think it's smarter here and also easier to use a service or a factory.

Example of service/factory utilisation

Combine this with the attrs parameter of the link function

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Apr 27, 2015 at 8:03

Solofeed

1511 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lugaru · Accepted Answer · 2015-04-27 08:22:46Z

1

Try to watch your parameter. Probably you trying to use before you will getting it.

.directive('search', function($timeout) {
  return {
    restrict: 'AEC',
    scope: {
        items: '=',
        prompt:'@',
        title: '@',
        subtitle:'@',
        model: '=',
        onSelectupdate:'&'
    },
    link:function(scope,elem,attrs){
       scope.handleSelection=function(selectedItem){
         scope.model=selectedItem;
           console.warn(scope.items);
         scope.current=0;
         scope.selected=true;        
         $timeout(function(){
             scope.onSelectupdate();
          },200);
      };

      scope.$watch("items", function(newData) {
          console.log("Items: ", newData);
      });


      scope.current=0;
      scope.selected=true;
      scope.isCurrent=function(index){
         return scope.current==index;
      };
      scope.setCurrent=function(index){
         scope.current=index;
      };
    },
templateUrl : TAPPLENT_CONFIG.HTML_ENDPOINT[0]+'home/genericsearch.html'  }
})

answered Apr 27, 2015 at 8:22

Lugaru

1,4603 gold badges25 silver badges39 bronze badges

9 Comments

harrini Over a year ago

how can i make it to select multiple items??

Lugaru Over a year ago

what do you mean? "scope.items" is a not selected items it is a list(object) what you got from your main view/controller in current directive.

harrini Over a year ago

i can select only one item but i need to select multiple items how can i do this plnkr.co/edit/YhDv7oNMR1ZrheSHalIQ?p=preview

Lugaru Over a year ago

use angular directives: check this plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview

harrini Over a year ago

i was creating a custom directive so

|

Collectives™ on Stack Overflow

pass array of data from controller to custom directive?

2 Answers 2

Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related