在指令和控制器之间移动数据

时间:2016-11-04 17:52:06

标签: angularjs

我正在使用ui-grid到upload a XLS file through a directive and push the data

我正在尝试在我的指令和控制器之间移动数据(相当新的角度)。我经历了一堆线程(thisthisthisthis),试图了解如何使用&,{{ 1}},@=$watch,但我仍然不明白如何将数据从指令(具有JSON对象)移动到数组(myData)在我的控制器中。如果有人能帮我解决这个问题......

控制器

$observe

指令

.controller('ListCtrl', function ($scope, $state, $log, ServerRequest, $localStorage, $sessionStorage, uiGridConstants) {

        var vm = this, c = console;
        $scope.sortAlert = sortAlert;
        $scope.myData = [
          {
            "alert": "2",
            "firstName": "Rob",
            "lastName": "McBob",
            "dob": "03/12/1941",
            "sex": "M",
            "mi": "C",
            "referralReason": "Morbid Obesity",
            "userStatus": "Schedules",
            "timeSched": "02:00PM",
            "homeNum": "416-555-5555",
            "cellNum": "905-555-5555",
            "notes": "cool",
            "uniqueId": "638768756304"
          }
      ];


      //this formats the row
      $scope.highlightFilteredHeader = function( row, rowRenderIndex, col, colRenderIndex ) {
        if( col.filters[0].term ){
          return 'header-filtered';
        } else {
          return '';
        }
      };

      //handles the functionality of the grid
      $scope.gridOptions = {
        enableFiltering: true,
        onRegisterApi: function(gridApi){
          $scope.gridApi = gridApi; //so we can use gridapi functions of ui-grid
          //handler for clicking rows
          gridApi.selection.on.rowSelectionChanged($scope, function(row){
            var thisRow = gridApi.selection.getSelectedRows() //gets the clicked row object
            $log.log(thisRow);
            //creates new tab -> the tabby part itselfid="' + thisRow[0].uniqueId + '"
            $('.ui.top.attached.tabular.menu').append('<a class="active item" style="border-radius: 0px !important; background-color: #4B6A89; font-family: Roboto; font-size: 16px; color: white; font-weight: 300; letter-spacing: 1.5px;" id="' + thisRow[0].uniqueId + '" data-tab="' + thisRow[0].uniqueId + '">' + thisRow[0].firstName + ' ' + thisRow[0].lastName + '<i id="' + thisRow[0].uniqueId + '" class="material-icons" style="position: relative; right: -60px; font-weight: 200;">clear</i></a>');                //add ui bottom - the body of the tab
            $('.tab-container').append('<div id="' + thisRow[0].uniqueId +'" class="ui bottom attached tab segment" data-tab="' + thisRow[0].uniqueId + '">' + 'new page' + '</div>');
            reinitializeTabs(); //jquery to add ui-semantic tabs functionality to new tabs

          });
        },
        data: 'myData',
        columnDefs: [
          {
            field: 'alert', displayName: 'ALERTS', headerCellClass: $scope.highlightFilteredHeader,
              sort: {
                direction: uiGridConstants.DESC,
                priority: 1
              }
          },
          {
            field: 'firstName', displayName: 'FIRST NAME', headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'lastName', displayName: 'LAST NAME', headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'dob', displayName: 'DOB', headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'referralReason', displayName: 'REFERRAL REASON', headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'userStatus', displayName: 'STATUS', headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'timeSched', displayName: 'TIME', headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'homeNum', displayName: 'HOME #', headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'cellNum', displayName: 'CELL #', headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'mi', displayName: 'MI', headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'sex', displayName: 'SEX', headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'notes', displayName: 'NOTES', headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'uniqueId', displayName: 'UNIQUE ID', headerCellClass: $scope.highlightFilteredHeader
          }
        ]
      };


      });

  })//end of controller

1 个答案:

答案 0 :(得分:1)

在你的指令中,声明对myData的引用(可以是任何名称):

scope: {
    myData: '=',
    opts: '='
}

指令用法(myData是控制器中的对象):

<fileread my-data="myData"></fileread>

现在,控制器和指令中的$ scope / scope指向同一资源。

@用于单向数据绑定,因此您在评论中发布了错误。