5
사용자 정의 헤더가있는 ng 테이블 내에 Typeahead 및 Tooltip을 사용하고 있습니다. 이것은 기능적으로 작동하는 것처럼 보입니다. 만약 당신이 덩어리를 보면 당신은 결코 문제를 알 수 없을 것입니다. 그러나 코드를 실행하면 콘솔에서 볼 수있는 많은 오류가 발생합니다. 로드 중 하나에 마우스를 올리거나 Typeahead에서 값을 선택할 때마다 오류가 발생합니다. 아무도 이것을 해결하는 방법을 알고 있습니까? 나는 며칠 동안 그 일을 해왔으며 해결책을 찾지 못했습니다.AngularUI에서 Typeahead 및 ntTable의 툴팁이 scope.isOpen에서 정의되지 않은 사용자 정의 헤더 길이로 정의되지 않았습니다.
다음은 오류입니다.
TypeError: Cannot read property 'length' of undefined
at Scope.scope.isOpen (http://localhost:61814/app/Scripts/ui-bootstrap-tpls-0.11.0.js:3756:31)
at $parseFunctionCall (http://localhost:61814/app/Scripts/angular.js:11351:18)
at Scope.$eval (http://localhost:61814/app/Scripts/angular.js:13202:28)
at Object.watchExpression (<anonymous>:763:37)
at Scope.$digest (http://localhost:61814/app/Scripts/angular.js:13032:40)
at Scope.$delegate.__proto__.$digest (<anonymous>:844:31)
at Scope.$apply (http://localhost:61814/app/Scripts/angular.js:13306:24)
at Scope.$delegate.__proto__.$apply (<anonymous>:855:30)
at done (http://localhost:61814/app/Scripts/angular.js:8797:47)
at completeRequest (http://localhost:61814/app/Scripts/angular.js:9012:7)
여기 내 컨트롤러 코드
var app = angular.module('plunker', ['ui.bootstrap','ngTable' ]);
app.controller('MainCtrl', function($scope, $filter, ngTableParams) {
$scope.name = 'World';
$scope.testFilterText = "";
$scope.data = {};
$scope.data.selected = "";
$scope.testData = [{Name:"Han Solo",Role:"Smuggler"},{Name:"Luke Skywalker",Role:"Moisture Farmer"},{Name:"Princess Leia",Role:"Princess"},{Name:"Obie Wan Kenobi",Role:"Jedi Master"},{Name:"Chewbacca",Role:"Smuggler"},{Name:"Boba Fett",Role:"Bounty Hunter"},{Name:"Darth Vader",Role:"Sith Lord"},{Name:"Wedge Antilles",Role:"Pilot"},{Name:"C3PO",Role:"Protocol Droid"},{Name:"R2D2",Role:"Astromech Droid"},{Name:"Jabba The Hutt",Role:"Gangster"},{Name:"Greedo",Role:"Bounty Hunter"},{Name:"Darth Bane",Role:"Sith Lord"},{Name:"Yoda",Role:"Jedi Master"},{Name:"Mace Windu",Role:"Jedi Master"},{Name:"Commander Cody",Role:"Clone Trooper"},{Name:"Lando Calrissian",Role:"Entrepreneur"},{Name:"Mara Jade",Role:"Jedi"},{Name:"Lando Calrissian",Role:"Entrepreneur"},{Name:"Jango Fett",Role:"Bounty Hunter"},{Name:"Jar Jar Binks",Role:"Doofus"},{Name:"Darth Maul",Role:"Sith"},{Name:"Emporer Palpatine",Role:"Sith Lord"},{Name:"Qui-Gon Jinn",Role:"Jedi Master"},{Name:"Grand Moff Tarkin",Role:"Grand Moff"},{Name:"Lando Calrissian",Role:"Entrepreneur"},{Name:"Admiral Akbar",Role:"Admiral"},{Name:"IG-88",Role:"Bounty Hunter"}];
$scope.charactersTable = new ngTableParams({
page:1,
count: 10
},{
counts: [10,20,50,100],
total: $scope.testData.length,
getData: function($defer, params) {
var filteredData = params.filter() ?
$filter('filter')($scope.testData, { 'Name': $scope.data.selected.Name }) :
$scope.testData;
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy()) :
$scope.testData;
$scope.myOrderedData = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length);
$defer.resolve($scope.myOrderedData);
}
});
$scope.$watch("data.selected.Name", function (newValue, oldValue) {
if (newValue !== oldValue) {
$timeout(function() {
$scope.charactersTable.reload();
}, 100);
}
});
$scope.selectMatch = function (selection) {
$scope.data.selected = selection;
$scope.charactersTable.reload();
};
$scope.clearNameFilterText = function(evt){
if (evt.keyCode === 13 && angular.isUndefined($scope.data.selected.Name)) {
$scope.charactersTable.reload();
}
}
});
입니다 그리고 여기 당신이 plunker에 오류가 표시되지 않습니다 그러나 나는 또한 plunker를 생성 한 HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="ng-table.js"></script>
<script src="app.js"></script>
<script src="ui-bootstrap-tpls-0.11.0.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="jumbotron">
<div class="tab-content">
<div class="tab-pane active">
<div>* To clear name filter delete previously entered text and press the Enter key.</div>
<table ng-table="charactersTable" class="table table-hover table-condensed table-striped">
<thead>
<tr class="main">
<th class="sort" ng-click="charactersTable.sorting({'Name' : charactersTable.isSortBy('Name', 'asc') ? 'desc' : 'asc'})">Character Name <span class="glyphicon glyphicon-sort"></span></th>
<th class="sort" ng-click="charactersTable.sorting({'Role' : charactersTable.isSortBy('Role', 'asc') ? 'desc' : 'asc'})">Role <span class="glyphicon glyphicon-sort"></span></th>
</tr>
<tr class="filters">
<th class="input">
<div class="btn-group">
<input type="text" class="form-control passive" ng-model="data.selected"
typeahead="characterName as character.Name for character in testData | filter:$viewValue | limitTo:8"
typeahead-on-select="selectMatch($item)" ng-keypress="clearNameFilterText($event)"
placeholder="Enter name">
</div>
</th>
<th class="dropdown">
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in $data">
<td><a ng-click="" class="" tooltip-placement="right" tooltip-popup-delay="500" tooltip-html-unsafe='<div class="tooltip-inner vertical"><table><tr><td>Name</td><td>{{item.Name}}</td></tr><tr><td>Role</td><td>{{item.Role}}</td></tr></table></div>'>{{item.Name}}</a></td>
<td>{{item.Role}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
입니다. 오류는 코드가 로컬 또는 웹 서버에서 실행될 때 나타납니다.
이 문제에 대한 도움을 미리 감사드립니다.