将数据数组从控制器传递到自定义指令？

Posted 2023-02-24

【中文标题】将数据数组从控制器传递到自定义指令？

【英文标题】：pass array of data from controller to custom directive?

【发布时间】：2015-07-05 13:33:03

【问题描述】：

我试图将一个对象数组从一个角度控制器传递给一个自定义指令元素并使用 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>

请帮助解决这个问题。 提前致谢

【问题讨论】：

您传递title 的方式是错误的，您无法使用多级字符串值访问属性值

您是否正在尝试创建通用搜索指令...jsfiddle.net/arunpjohny/mgm7cta8/2 - 如果您在文本字段中输入内容，您会看到一些 X 标记

感谢您的回复。那么我怎样才能在 ng-repeat 中获取属性值。没有控制台错误。

也许它被隐藏了？你有ng-hide="!model.length || selected"

是的，我正在尝试创建通用搜索自定义指令

【参考方案1】：

试着观察你的参数。可能你在得到它之前就尝试使用它。

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

【讨论】：

我怎样才能使它选择多个项目？？

什么意思？ “scope.items”是一个未选择的项目，它是您从当前指令中的主视图/控制器获得的列表（对象）。

我只能选择一项，但我需要选择多项我该怎么做plnkr.co/edit/YhDv7oNMR1ZrheSHalIQ?p=preview

使用角度指令：检查plnkr.co/edit/BcJOezOABxSuc2fa5lRy?p=preview

我正在创建一个自定义指令，所以

【参考方案2】：

您可以通过 attrs 在您的链接功能中访问它：

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

但是你的方式感觉有些不对劲。我认为这里更智能，也更容易使用服务或工厂。

Example of service/factory utilisation

将此与链接函数的attrs参数结合起来