2015-04-27 118 views
1

我試圖從一個角度控制器傳遞一個對象數組到一個自定義指令元素,並用ng-repeat迭代對象,但我沒有獲取數據。將數組從控制器傳遞給自定義指令?

$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文件...........

<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> 

請幫忙解決這個問題。 由於事先

+0

任何控制檯錯誤? –

+0

你是如何傳遞'title'是錯誤的,你不能使用多級字符串值 –

+0

你想創建一個通用的搜索指令訪問屬性值... http://jsfiddle.net/arunpjohny/ mgm7cta8/2/- 如果您在文本框中鍵入內容,則可以看到一些「X」標記 –

回答

1

您可以通過訪問ATTRS它在你的鏈接功能:

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

但什麼感覺錯了你的方式做到這一點。我認爲這裏更聰明,也更容易使用服務或工廠。

Example of service/factory utilisation

鏈接功能

1

嘗試觀看您的參數ATTRS參數結合這一點。可能你在嘗試使用之前,你會得到它。

.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' } 
}) 
+0

我如何使它選擇多個項目? – harrini

+0

你是什麼意思? 「scope.items」是一個未選定的項目,它是一個列表(對象),你在當前的指令中從你的主視圖/控制器中得到了什麼。 – Lugaru

+0

我可以選擇只有一個項目,但我需要選擇多個項目我該如何做這個http://plnkr.co/edit/YhDv7oNMR1ZrheSHalIQ?p=preview – harrini

相關問題