带有自定义指令的ui-grid

Question

我正在尝试创建一个自定义指令以生成动态ui-grid，但是存在一些问题，因为在行数据附近出现错误“无法读取未定义的属性'data'”： scope.options .data =

在我的角度代码下面：

angular.module('plugins.controller').controller('DEMOTESTCtrl', ['$scope', 'DEMOTEST', function ($scope, DEMOTEST) {

    var all = this;
    all.myData = [
        {
            "firstName": "Cox",
            "lastName": "Carney",
            "company": "Enormo",
            "employed": true
        },
        {
            "firstName": "Lorraine",
            "lastName": "Wise",
            "company": "Comveyer",
            "employed": false
        },
    ];

    all.firstOptions = {
        data: all.myData,
    };

}]).directive('myGrid', function(){
    return {
        templateUrl : 'grid.html',
    controller : 'DEMOTESTCtrl',
    controllerAs : 'grid',
    restrict: 'E',
    scope: {
      options : '=',
    },
    bindToController: true,
    link: function(scope, element, attrs) {

        var defaultColDef = [
              {field: 'firstName'},
              {field: 'lastName'},
              {field: 'company'},
              {field: 'employed'}
        ];

        scope.gridOptions = {
          data: scope.options.data, //private scoped from options : '=',
          columnDefs: scope.options.colDef || defaultColDef, // optional setting or default setting
          // ... some more default data
        };
      }
  };
});

还有我的html代码

<div ng-controller="DEMOTESTCtrl as all">
<my-grid options="all.firstOptions" class="grid"></my-grid>
</div>

<script type="text/ng-template" id="grid.html" style="width: 1000px"> 
<div class="grid" ui-grid="gridOptions">
</div>
</script>
<link rel="stylesheet" href="./Scripts/plugins/DEMOTEST/DEMOTEST.css">

我该如何解决？