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

Answer 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

Answer 2

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'  }
})