asp.net-mvc-4 - 带有外部数据和 TypeScript : compile error "Cannot set property ' gridDim' of undefined"的 Ng-grid

Question

更新#1:在我评论过的修复之后，现在我的应用程序启动了，但是除了它的边界框和过滤器按钮和弹出窗口之外，没有渲染网格。然而，我没有从控制台得到任何错误，并且就我可以使用调试器到达的情况而言，我可以看到从服务器获取的数据是正常的。如果我使用 Batarang，我可以看到与我的模型相对应的范围，并正确填充了项目。我相应地更新了可下载的复制解决方案。谁能解释为什么 ng-grid 没有在这里更新？

我开始使用 ng-grid 和 TypeScript，一旦我的测试应用程序启动，我就会发现问题。有关完整测试解决方案的链接，请参阅本文底部。当然，即使在这几个文件中，我也犯了很多错误，但我希望有一些东西可以开始并逐步了解更多信息。

MVC 应用程序有两个客户端应用程序:

app.js 用于默​​认 View (主页/索引)。这里没有 typescript ，整个代码都包含在这个单个文件中。该代码源自 ng-grid 文档中的分页示例，并试图保持尽可能简单。

MyApp.js 用于另一个 View (主页/模型)中更真实的示例。此示例使用服务、模型和 Controller ，其 JS 代码是从 TypeScript 编译的。为简单起见，我只是将这些组件存储在 Scripts/App 下的 Controllers、Models 和 Services 文件夹中，每个文件只包含一个类或接口(interface)。生成的 JS 文件手动包含在 View 中。

app.js 可以工作，只是它有过滤问题。我在这里发布了这些:
Server-side filtering with ng-grid: binding issue?

MyApp.js 有 ng-grid 的启动问题。应用程序一启动，就会在网格绑定(bind)中抛出一个 TypeError:

TypeError: Cannot set property 'gridDim' of undefined
    at ngGridDirectives.directive.ngGridDirective.compile.pre (http://localhost:55203/Scripts/ng-grid-2.0.7.js:2708:37)
    at nodeLinkFn (http://localhost:55203/Scripts/angular.js:4392:13)
    at compositeLinkFn (http://localhost:55203/Scripts/angular.js:4015:15)
    at nodeLinkFn (http://localhost:55203/Scripts/angular.js:4400:24)
    at compositeLinkFn (http://localhost:55203/Scripts/angular.js:4015:15)
    at publicLinkFn (http://localhost:55203/Scripts/angular.js:3920:30)
    at resumeBootstrapInternal (http://localhost:55203/Scripts/angular.js:983:27)
    at Object.$get.Scope.$eval (http://localhost:55203/Scripts/angular.js:8057:28)
    at Object.$get.Scope.$apply (http://localhost:55203/Scripts/angular.js:8137:23)
    at resumeBootstrapInternal (http://localhost:55203/Scripts/angular.js:981:15) <div ng-grid="gridOptions" style="height: 400px" class="ng-scope"> angular.js:5754

我通过谷歌搜索发现的唯一类似问题是 https://github.com/angular-ui/ng-grid/issues/60 ，但这似乎与我的情况无关，因为网格选项设置得太晚了。

服务器端只有一个 API RESTful Controller 返回服务器分页、排序和过滤的项目。

您可以在此处找到完整的复制解决方案(只需保存、解压缩和打开；所有依赖项均来自 NuGet)；有关更多信息，请参阅 readme.txt 文件:

http://sdrv.ms/167gv0F

只需启动应用程序并单击右上角的 MODEL 即可运行抛出错误的 TypeScript 应用程序。整个应用由 1 个 Controller 、1 个服务和 1 个模型组成。

对于像我这样的初学者来说，有一个像这样的简单工作示例会很好。有人可以帮忙吗？

Answer 1

此错误表示 gridOptions在 Angular 尝试解析 ng-grid="yourArray" 时尚未定义, 其中 yourArray是提供给 gridOptions 的相同数组.在重构以前工作的 ng-grid 后，我遇到了同样的问题.

所以gridOptions必须在具有 ng-grid="yourArray" 的元素之前定义应用于它的属性(而不是在该元素自己的 Controller 中)。

我通过定义 gridOptions 解决了这个问题在某处的外部元素中(例如，在全局/应用范围内)。

附言也许有更好的方法，但这对我有用。