Javascript Can'；t读取未定义角度智能表的数据

我想在不同的页面中加载不同的网格选项

事实上，我想将一个角度智能表包装到我自己的指令中，以便使用不同的网格选项进行重用，但不幸的是，我无法实现这一点，因为我得到了

无法读取未定义的数据

您能否帮助我确定我在这方面做错了什么，以及如何基于视图在一个指令中绑定不同的网格选项（隔离范围）

我想在不同的页面中加载不同的网格选项

HTML

<ltcg-upd-grid options="vm.gridData"></ltcg-upd-grid>

<table st-table="gridOptions" class="table table-condensed table-hover">
    <thead>
        <tr>
            <th>Type</th>
            <th>Name</th>
            <th>Address</th>
            <th ng-if="city">City/State</th>
            <th ng-if="zip">Zip</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in gridOptions">
            <td width="20%">{{row.type | uppercase}}</td>
            <td width="20%">{{row.name  | uppercase}}</td>
            <td width="30%">{{row.address | uppercase}}</td>
            <td width="15%" ng-if="city">{{row.cityState | uppercase}}</td>
            <td width="15%" ng-if="zip">{{row.zip | uppercase}}</td>
        </tr>
    </tbody>
</table>

    export class planDetailsCtrl {

        static $inject: Array<string> = ['$scope'];
        constructor(private scope: ng.IFormController) {
            this.activate();
        }

        gridOptions: any = null;
        gridData: any = null;
        all:any;

        activate() {

            this.gridOptions = [
                { type: 'Home healthy Mohan', name: 'Renard', address: '311 chestnu street', cityState: 'addison il', zip: '60101' },
                { type: 'Home healthy Agency', name: 'Renard', address: '311 chestnu street', cityState: 'addison il', zip: '60105' },
                { type: 'Home healthy Agency', name: 'Renard', address: '311 chestnu street', cityState: 'addison il', zip: '60109' },
                { type: 'Home healthy Agency', name: 'Renard', address: '311 chestnu street', cityState: 'addison il', zip: '60111' },
                { type: 'Home healthy Agency', name: 'Renard', address: '311 chestnu street', cityState: 'addison il', zip: '60145' },
                { type: 'Home healthy Agency', name: 'Renard', address: '311 chestnu street', cityState: 'addison il', zip: '60199' }

            ];


            this.gridData = {
                data: this.gridOptions
            };


        }
    }

    angular
        .module('app.tasks.provider')
        .controller('app.tasks.provider.planDetailsCtrl', planDetailsCtrl);

class LtcgUpdGridDirective implements ng.IDirective {

        static instance(): ng.IDirective { return new LtcgUpdGridDirective(); }
        restrict: string = 'E';        
        transclude = true;
         scope = {
            'cityVisible': "@",
            'zipVisble': "@"
        }; 

        templateUrl = 'views/widgets/ltcg-updgrid.html';       

        controller = updGridCtrl;
        controllerAs = 'vm';
        bindToController = true;
        link = (scope: any, element: ng.IAugmentedJQuery, attrs: IGridAttributes, ctrl: any) => {            

            console.log("link in");
            console.log("read data" + scope.options.data);

            scope.$watch("options", function (newValue, OldValue, scope) {
                console.log(newValue);
                scope.gridOptions = scope.options.data //private scoped from options : '=',              

            });            



         } 
    }

    angular
        .module('app.widgets')
        .directive('ltcgUpdGrid', LtcgUpdGridDirective.instance);