5
Sto utilizzando Typeahead e Tooltip all'interno di un ng-table con intestazioni personalizzate. Questo sembra funzionare in modo funzionale, e se guardi il plunker non noterai mai un problema. Ma quando si esegue il codice genera molti errori che possono essere visualizzati nella console. Gli errori vengono generati sul carico, ogni volta che passo il mouse su una delle righe o quando seleziono un valore da Typeahead. Qualcuno sa come risolvere questo? Ci sto lavorando da un paio di giorni e non ho trovato una soluzione.AngularUI con Typeahead e Tooltip in ngTable con lunghezza dell'intestazione personalizzata non definita su scope.isOpen
Ecco l'errore.
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)
Ecco il mio codice di controllo
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();
}
}
});
E qui è la 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>
Ho anche creato un plunker tuttavia non sarà possibile visualizzare gli errori su plunker. gli errori compaiono quando il codice viene eseguito localmente o da un server web.
Grazie in anticipo per qualsiasi aiuto con questo problema.