Wybacz mi, jeśli nie wyjaśnię tego dobrze. Trudno mi wymyślić mój umysł wokół prawdziwego problemu, który mam. Mam nadzieję, że ktoś będzie w stanie zrozumieć moje pomysły i prawdopodobnie poprawić moje nieporozumienia MVC, sposobu prac kątowych lub struktury moich kontrolerów i które komponenty związały kontroler. Przepraszamy za długie pytanie, ale włączyłem tyle zrzutów ekranu i jak najwięcej kodu, jak myślałem, może być pomocne w zrozumieniu mojego aktualnego kłopotu. Utknąłem na tym przez tygodnie.

Buduję początkowe etapy aplikacji EHR (elektroniczny rekord zdrowia), który lekarze wykorzystali w biurze podczas odwiedzania u pacjentów. Oczywiście nie zrobiłem stylizacji wszystkiego ani nie stawiam treści, aby wyglądało dobrze. Nie skończyłem też tworzyć wszystkie dane dynamiczne - co jest tym, z czym jestem trudny. Utwór, na którym pracuję nad pozwala lekarzowi wybrać pacjenta, wyświetlanie informacji z ich przeszłych wizyt, rozpocznij wizytę i wypełnić informacje dla wszystkich swoich objawów, diagnoz i informacji na receptę.

Basic site layout

Lewe pasek menu jest sterownikiem, nagłówek jest sterownikiem, a dolna część (podsumowanie pacjenta) jest sterownikiem. Chcę, aby funkcjonować, jak można się spodziewać - początkowo ładuje nagłówek, a następnie wymachuje dolny 2/3 witryny (z podsumowania do objawów, diagnozy i recept). Tak więc po kliknięciu Start Visit należy załadować kawałek poniżej.

Started a Visit

Jak widać z pierwszego zrzutu ekranu, adres URL jest localhost:8080/#/patientSummary/1 gdzie 1 jest identyfikatorem pacjenta. Wszystko musi być oparte na tym identyfikatorze. Kiedy lekarz początkowo wybiera pacjenta, powinien załadować tę stronę i opierać informacje w nagłówku i podsumowaniu pacjenta z identyfikatora (przy użyciu zapytania do DB, które działa tylko w porządku). Następnie w przejściu do drugiego zrzutu ekranu i wszystkich przejść w ramach tej strony, nagłówek powinien pozostać stały.

W każdym z moich poglądów, pacjentów, objawów, diagnozach i testów receptowych, na górze mam <ng-include src="'templates/header.html'"></ng-include>, aby uzyskać nagłówek. Wiem, że to nie jest dobra praktyka. Tak najwyraźniej za każdym razem, gdy zmieniam stronę, renderuje nagłówek. Jak stwierdzono powyżej, nie chcę tego robić w ten sposób, ale jest to jedyny sposób, w jaki mógłbym go pracować.

Jakieś pomysły na temat tego, co mógłbym zrobić inaczej? Musi działać jak opisałem powyżej, , aby nagłówek pozostanie stałym na każdej stronie, ale także będzie zaludniony dynamicznie oparty na identyfikator pacjenta w tym samym czasie, co podsumowanie pacjenta , ale Nie mogę zrozumieć, jak. Wyglądałem na usługi / pamięć podręczną, aby podzielić się identyfikatorem pacjenta między kontrolerami nagłówek a podsumowaniem pacjenta, ale nie wydaje się to najlepszym sposobem, aby to zrobić, albo (i za każdym razem, gdy próbuję wrócić tak niezdefiniowany nawet po ja Wtryskiwał go do kontrolera).

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Patient Summary</title>
    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
</head>
<body>
    <div id="content" ng-app="osmosisApp" ng-controller="MainCtrl">
        <!-- Left Menu -->
        <div id="left-menu-wrapper" ng-controller="MenuCtrl">
            <div class="left-menu-button" ng-click="showLeftMenu = !showLeftMenu"></div>
            <nav id="left-menu" class="left-menu" ng-class="{'open' : showLeftMenu}">
                <h3>Patient List</h3>
                <block class="patient-button" ng-repeat="patient in patients" ng-click="go('/patientSummary/' + patient.id)">
                    <img class="patient-button-image" ng-src="{{patient.picture}}"/>
                    <div id="patient-name-and-status" class="patient-name-and-status">
                        <h4 class="patient-button-name">{{patient.name}}</h4>
                        <p class="patient-button-status">{{patient.status}}</p>
                    </div>
                </block>
            </nav>
            <div id="content-cover" ng-click="showLeftMenu = !showLeftMenu" ng-class="{'content-cover' : showLeftMenu, 'content-uncover' : !showLeftMenu}"></div>
        </div>
        <!-- /Left Menu -->
        <!-- Content -->
        <div id="content-frame" ng-view></div>
        <!-- /Content -->
    </div>
    <script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script>
    <script src="lib/angular/angular-route.js"></script>
    <script src="js/controllers.js"></script>
</body>
</html>

header.html

<!-- Header -->
<div id="header-wrapper">
    <div id="patient-summary-header" class="header-row" ng-controller="HeaderCtrl">
        <div id="pic-and-info" class="column-1"> 
            <img id="patient-picture" ng-src="{{patient.picture}}" />
            <h2 id="patient-name">{{patient.name}}</h2>
            <div id="patient-info">
                <p>{{patient.age}}, {{patient.sex}}</p> 
            </div>
        </div>
        <div id="patient-vitals-graph" class="column-2">
            <canvas id="vitals-graph"></canvas>
        </div>
        <div id="logo-div" class="column-3">
            <img id="logo" ng-src="{{'http://placehold.it/400x150'}}" />
        </div>
    </div>
</div>
<!-- /Header -->

pacjentów rozrywki.html (jeden z widoków)

<ng-include src="'templates/header.html'"></ng-include>
<!-- Patient Summary -->
<!-- Nav Buttons -->
<div id="start-visit" class="start-visit-button" ng-click="go('/symptoms')">Start Visit</div>
<!-- /Nav Buttons -->
<div id="patient-summary" class="section group"> 
    <div id="column1" class="column span-2-of-3 height-5-of-5">
        <h2>Past Visits</h2>
        <div id="past-visits-info" class="info-section height-5-of-5">
            <div class="past-visits-display" ng-repeat="pastVisit in patientSummary.pastVisits">
                <h5>Diagnosis</h5>
                <p>{{pastVisit.diagnosis}}</p>
                <h5>Symptoms</h5>
                <ul>
                    <li ng-repeat="symptom in pastVisit.symptoms">{{symptom}}</li>
                </ul>
                <div class="past-visits-display-date">{{pastVisit.date}}</div>
            </div>
        </div> 
    </div>
    <div id="column2" class="column span-1-of-3 height-5-of-5">
        <h2>Current Conditions</h2>
        <div class="info-section height-1-of-5">
            <ul>
                <li ng-repeat="condition in patientSummary.currentConditions">{{condition}}</li>
            </ul>
        </div>
        <h2>Current Prescriptions</h2>
        <div class="info-section height-2-of-5">
            <ul>
                <li ng-repeat="prescription in prescriptions | currentPrescriptions">{{prescription.name}}</li>
            </ul>
        </div>
        <h2>Expired Prescriptions</h2>
        <div class="info-section height-2-of-5">
            <ul>
                <li ng-repeat="prescription in prescriptions | expiredPrescriptions">{{prescription.name}}</li>
            </ul>
        </div>
        <h2>Patient Questions</h2>
        <div class="info-section height-1-of-5">
            <ul>
                <li ng-repeat="question in patientSummary.questions">{{question}}</li>
            </ul>
        </div>
    </div>
</div>
<!-- /Patient Summary -->

trasy w kontrolerach.js

var osmosisApp = angular.module('osmosisApp', ['ngRoute'], function($routeProvider, $httpProvider) {
    $routeProvider
        .when('/select-news', {
            templateUrl:'templates/select-news.html'
        })
        .when('/select-news/end-visit', {
            templateUrl:'templates/select-news.html',
            controller:'EndVisitCtrl'
        })
        .when('/patientSummary/:id', {
            templateUrl:'templates/patientSummary.html',
            controller:'SummaryCtrl'
        })
        .when('/symptoms', {
            templateUrl:'templates/symptoms.html',
            controller:'SymptomsCtrl'
        })
        .when('/prescriptions-tests', {
            templateUrl:'templates/prescriptions-tests.html',
            controller:'PrescriptionsTestsCtrl'
        })
        .when('/diagnosis', {
            templateUrl:'templates/diagnosis.html',
            controller:'DiagnosisCtrl'
        })
        .otherwise({redirectTo:'/select-news'});
// Other magic to make POST stuff work

Sterowniki w kontrolerach.js

// Main Controller
osmosisApp.controller('MainCtrl', ['$scope', '$location', function ($scope, $location) {
    $scope.showHeader = false;

    $scope.go = function(path) {
        $location.path(path);
    };

    $scope.$on('$routeChangeSuccess', function() {
        $.getScript("lib/chart/Chart.js", function() {
            $.getScript("js/chart.js"); 
        }); 
    });
}]);

// Header Controller
osmosisApp.controller('HeaderCtrl', ['$scope', '$http', function ($scope, $http, cacheService) {
    //sharedProperties.getId();
    //cacheService.get('id');

    // Needs to grab the ID from the SummaryCtrl
    /*$http.post("/patient/getPatientInfo", {"patient_id" : 1})
        .success(function(response) {
            console.log("Server response: " + JSON.stringify(response));
        });*/

    $scope.patient = {
        "id" : 1,
        "name" : "Mike DeMille",
        "age" : "23",
        "sex" : "Male",
        "picture" : "images/MikeDeMille.png"
    };
}]);

// Patient Summary Controller
osmosisApp.controller('SummaryCtrl', ['$scope', '$routeParams', function ($scope, $routeParams, cacheService) {
    //sharedProperties.setId($routeParams.id);
    //cacheService.put('id', $routeParams.id);
    $scope.patientSummary = {
        "currentConditions" : ["Lung cancer", "Another awful, life-threatening condition"],
        "pastVisits" : [{
            "date" : "9/1/2013",
            "symptoms" : ["Old age", "Mortality"],
            "diagnosis" : "The patient is going to die... Again",
            "prescriptions" : [{
                "name" : "Prescription name",
                "dose" : "Once daily",
                "form" : "tablet",
                "duration" : "30 days",
                "refills" : "3",
                "expiration" : "9/1/2014"
            },{
                "name" : "Prescription name 2",
                "dose" : "Twice daily",
                "form" : "capsule",
                "duration" : "60 days",
                "refills" : "3",
                "expiration" : "9/1/2014"
            }],
            "tests" : [{
                "name" : "Test name",
                "results" : "Blah blah blah, results"
            },{
                "name" : "Test name 2",
                "results" : "Blah blah blah, results 2"
            }]
        },{
            "date" : "7/3/2011",
            "symptoms" : ["Promiscuity", "Risk taking"],
            "diagnosis" : "The patient is going to die",
            "prescriptions" : [{
                "name" : "Prescription name 3",
                "dose" : "Once daily",
                "form" : "tablet",
                "duration" : "30 days",
                "refills" : "3",
                "expiration" : "7/3/2012"
            },{
                "name" : "Prescription name 4",
                "dose" : "Twice daily",
                "form" : "capsule",
                "duration" : "10 days",
                "refills" : "3",
                "expiration" : "7/3/2012"
            }],
            "tests" : [{
                "name" : "Test name 3",
                "results" : "Blah blah blah, results 3"
            },{
                "name" : "Test name 4",
                "results" : "Blah blah blah, results 4"
            }]
        }],
        "questions" : ["When am I going to die?", "Why am I going to die?"]
    }

    $scope.prescriptions = [{
            "name" : "Prescription name",
            "dose" : "Once daily",
            "form" : "tablet",
            "duration" : "30 days",
            "refills" : "3",
            "expiration" : "9/1/2014"
        },{
            "name" : "Prescription name 2",
            "dose" : "Twice daily",
            "form" : "capsule",
            "duration" : "60 days",
            "refills" : "3",
            "expiration" : "9/1/2014"
        },{
            "name" : "Prescription name 3",
            "dose" : "Once daily",
            "form" : "tablet",
            "duration" : "30 days",
            "refills" : "3",
            "expiration" : "7/3/2012"
        },{
            "name" : "Prescription name 4",
            "dose" : "Twice daily",
            "form" : "capsule",
            "duration" : "10 days",
            "refills" : "3",
            "expiration" : "7/3/2012"
        }
    ];
}]);
2
Mike DeMille 10 grudzień 2013, 22:50

2 odpowiedzi

Najlepsza odpowiedź

Możesz spojrzeć na routera. UI-router obsługuje bardziej złożoną strukturę szumową, w tym wiele widoków na jednej stronie.

1
Remco Haszing 10 grudzień 2013, 18:57

Możesz umieścić szablon nagłówka z widoku NG, a dane połączone z globalami $ rootscope, a po zmianie strony należy usunąć dane z $ rootscope, aby zmienić się w nagłówku.

Na przykład, aby wyświetlić tylko identyfikator z param ....

'index.html'
<ng-include src="'templates/header.html'"></ng-include>
<div id="content-frame" ng-view></div>

'controllers.js'
osmosisApp.controller('SummaryCtrl', ['$scope', '$routeParams', '$rootScope', function ($scope, $routeParams, $rootScope) {
    $rootScope.pacientId = $routeParams.id;
    .........................
    $scope.$on("$destroy", function(){
        delete $rootScope.pacientId;
    }); 

'headers.html'
{{pacientId}}

Możesz zobaczyć tę pracę w PLunker

0
NEOLPAR 16 maj 2014, 21:04