使用 ui-select "Cannot set property 'gridOptions' of undefined"的 AngularJs

Question

我正在尝试从 angularJS 中与 ui-select 一起使用的下拉菜单中的数据库中获取数据，并通过单击一个按钮在 ui-grid 中显示下面与所选项目相关的一些数据。

我已经尝试使用选择选项标签，它工作正常。之后，我尝试使用带有角度的ui-select，但失败了，现在即使以前的尝试也不起作用。

我已经创建了角度文件，成功从数据库中获取 JSON 格式的数据，但在控制台中它给了我"无法设置未定义的属性'gridOptions'"。

角度JS代码

var app = angular.module('UmsApp', ['ngTouch', 'ui.grid', 'ui.select']);
app.controller('StudentController', [function ($scope, $http) {
$scope.gridOptions = {};
$scope.gridOptions2 = {};
$http.get('/Default/GetStudents/').then(function (d) {
$scope.gridOptions.data = d.data;
console.log(gridOptions.data);
$scope.checkSelection = function () {
if ($scope.stuStelec != "" && $scope.stuStelec != undefined) {
$http.get('/Courses/GetCourses/' + $scope.stuStelec).then(function (a) {
$scope.gridOptions2.data = a.data;
console.log(gridOptions2.data);
}, function (a) {
alert(a.data);
});
}
else
$scope.msg = 'Please Select a student';
}
}, function (d) {
alert(d.data);
});
}]);

.HTML

<div style="padding-left:30%" ng-controller="StudentController">
<div class="row">
<h6 style="padding-right:2%; font-size:24px;">Select student: </h6>
<ui-select ng-model="stuStelec.selected" theme="bootstrap">
<ui-select-match placeholder="Enter a name...">
{{$select.selected.name}}
</ui-select-match>
<ui-choices class="ui-select-choices" repeat="x in gridOptions.data | filter: $select.search">
{{x.Name}} {{x.Surname}}
</ui-choices>
</ui-select>
@* === AT FIRST TIME THIS WAS WORKING
<select style="padding-right:2%" name="students" class="custom-select" ng-model="stuStelec">
<option value="" disabled selected hidden>Please Select...</option>
<option ng-repeat="x in gridOptions.data" value="{{x.id}}">{{x.Name+" "+x.Surname}}</option>
</select>
<input type="button" value="Select" ng-click="checkSelection()" />
*@
</div><br /><br />
<div id="grid1" ui-grid="gridOptions2" class="grid"></div>
<span style="color:red">{{msg}}</span>
</div>

我在控制台中收到此错误：

TypeError: Cannot set property 'gridOptions' of undefined
at Object.<anonymous> (AppJs.js:3)
at Object.invoke (angular.js:5093)
at $controllerInit (angular.js:11138)
at nodeLinkFn (angular.js:10009)
at compositeLinkFn (angular.js:9350)
at compositeLinkFn (angular.js:9353)
at publicLinkFn (angular.js:9215)
at angular.js:1928
at Scope.$eval (angular.js:18816)
at Scope.$apply (angular.js:18915)

Answer 1

尝试从这里更改 angularJS 代码的第二行：

app.controller('StudentController', [function ($scope, $http) {

对此：

app.controller('StudentController', ['$scope', '$http', function ($scope, $http) {

即使我不记得这背后的解释 - 我已经有一段时间没有读到它了 - 如果我在函数定义之前删除代表注入的实际字符串，我的代码就会中断。

编辑：来自angularJS的开发人员指南

内联数组注释

这是批注应用程序组件的首选方法。这是 文档中的示例是如何编写的。

例如：

someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
// ...
}]);

在这里，我们传递一个数组，其元素由字符串列表组成( 依赖项的名称)，后跟函数本身。

使用这种类型的批注时，请注意保留批注 数组与函数声明中的参数同步。

发现这个： 内联数组注释 - 为什么此代码使用两个$scopes [重复]

希望它有帮助。