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, Apr 27 '15 at 07:55
are you trying to create a general purpose search directive... http://jsfiddle.net/arunpjohny/mgm7cta8/2/ - if you type something in the textfield you can see some `X` marks — Arun P Johny, Apr 27 '15 at 07:56
thanks for the reply. then how can i get the property value in ng-repeat. no console errors. — harrini, Apr 27 '15 at 07:58
Maybe it's hidden ? You have `ng-hide="!model.length || selected"` — Omri Aharon, Apr 27 '15 at 07:58

score 1 · Answer 1 · edited May 23 '17 at 12:15

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 '17 at 12:15

Community

1
1

answered Apr 27 '15 at 08:03

Solofeed

151
1
6

score 1 · Answer 2 · answered Apr 27 '15 at 08:22

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 '15 at 08:22

Lugaru

1,430
3
25
38

how can i make it to select multiple items?? – harrini Apr 27 '15 at 11:09
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. – Lugaru Apr 27 '15 at 12:14
i can select only one item but i need to select multiple items how can i do this http://plnkr.co/edit/YhDv7oNMR1ZrheSHalIQ?p=preview – harrini Apr 27 '15 at 12:37
use angular directives: check this http://plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview – Lugaru Apr 27 '15 at 13:20
i was creating a custom directive so – harrini Apr 27 '15 at 13:30
Ok, in that case why you need a custom as its already a lot of existing))) as I understood your requirements quite trivia and it's much easier to use existing one. – Lugaru Apr 27 '15 at 13:52
With your implementation it will never work. Even due to your HTML. – Lugaru Apr 27 '15 at 13:56
how can i create searc box with multiple select as tags using custom directive. can anyone help me please. i should not use already existing directives so please – harrini Apr 28 '15 at 05:27
That is not a few lines of code :) Just look how work existing ones and try to understand the concept. First you need create correct HTML skeleton. – Lugaru Apr 28 '15 at 06:52

pass array of data from controller to custom directive?

2 Answers2