Ich benutze UI-Router, und wenn ich in State.Area.Home.PatientDashboard ändern die Ansicht patientBoard nicht durch die im Eltern-Zustand ersetzt wird, so dass es die gleiche Ansicht bleibt . Ich versuche, den Status zu ändern, wenn auf ein Element der Tabelle in patientTable.html geklickt wird.UI Router verschachtelte Ansicht zeigt nicht
Auch ich möchte das URL-Feld im Home-Zustand nehmen, aber wenn ich es nehme, wird die Ansicht nicht angezeigt.
Ich bin irgendwie neu in AngularJS, also, wenn es etwas gibt, was ich nicht nach Standards oder etwas mache, entschuldige ich mich.
Wenn jemand mir dabei helfen könnte, wäre es großartig, da ich jetzt für einen Tag hier drin stecke.
Dank
neat.js:
angular.module('neat', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: '/views/dataBoard.html',
controller: 'BaseController'
})
.state('home.board', {
views: {
'patientBoard' : {
templateUrl: '/views/patient/patientTable.html',
controller: 'PatientTableController'
},
'messageBoard' : {
templateUrl: '/views/messageBoard.html',
controller: 'MessageBoardController'
}
}
})
.state('home.board.patientDashboard', {
views: {
'[email protected]' : {
templateUrl: '/views/patient/patientDashboard.html',
controller: 'PatientDashboardController'
}
}
});
$urlRouterProvider.otherwise('/');
});
Hier ist ein Beispiel des HTML:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NEAT</title>
<link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<script src="../lib/jquery/jquery-1.12.3.min.js"></script>
<script src="../lib/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="../lib/angularJS/angular.min.js"></script>
<script src="../lib/angularJS/angular-ui-router.min.js"></script>
<script src="../js/neat.js"></script>
<script src="../js/controllers/baseController.js"></script>
<script src="../js/controllers/patientTableController.js"></script>
<script src="../js/controllers/patientDashboardController.js"></script>
<script src="../js/controllers/patientInfoController.js"></script>
<script src="../js/controllers/messageBoardController.js"></script>
</head>
<body ng-app="neat">
<div ui-view></div>
</body>
</html>
dataBoard.html:
<div class="container-fluid board">
<div class="row">
<div ui-view="patientBoard" class="col-sm-8"></div>
<div ui-view="messageBoard" class="col-sm-4"></div>
</div>
</div>
patientTable.html
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered">
<tr>
<th>Nome</th>
</tr>
<tr ng-repeat="patient in patientsCollection.items">
<td>
<a ui-sref="home.board.patientDashboard">{{patient.data[1].value}}</a>
</td>
</tr>
</table>
</div>