Question

如果我不解释这个，请原谅我。我很难理解我遇到的真正问题。我希望有人能够理解我的想法并且可能纠正我对MVC的误解，Angular的工作方式，或者控制器的结构以及我将控制器绑在哪些组件上。很抱歉这个问题很长，但我已经包含了尽可能多的截图和代码，因为我认为这可能有助于了解我目前的困境。我已经坚持了几个星期。

我正在构建EHR（电子健康记录）应用程序的初始阶段，医生将在与患者一起访问时在办公室中使用该应用程序。显然，我没有完成所有内容的设计或内容使其看起来很好。我还没有完成所有数据的动态 - 这就是我遇到的困难。我正在处理的这篇文章允许医生选择一名患者，查看他们过去访问的信息，开始访问，并填写他们所有症状，诊断和处方信息的信息。

Basic site layout

左侧菜单栏是控制器，标题是控制器，底部（患者摘要）是控制器。我希望它能像你期望的那样运作 - 它最初加载标题然后换出网站的底部2/3（从摘要到症状，诊断和处方）。因此，点击Start Visit后，它应该加载下面的部分。

Started a Visit

从第一张屏幕截图中可以看出，网址为localhost:8080/#/patientSummary/1，其中1是患者ID。一切都必须基于该ID。因此，当医生最初选择患者时，它应该加载该页面并将信息基于标题和患者摘要基于ID（使用查询到工作正常的DB）。然后在转换到第二个屏幕截图以及该页面内的所有转换时，标题应保持不变。

在我的每个观点中，患者总结，症状，诊断和处方测试，在顶部我有<ng-include src="'templates/header.html'"></ng-include>来获得标题。我知道这不是好习惯。很明显，每当我更改页面时，它都会重新呈现标题。如上所述，我不想这样做，但这是我能让它发挥作用的唯一方式。

关于我能以不同方式做什么的任何想法？它需要像我上面描述的那样工作，以便标题在每个页面上保持不变，但也会根据患者ID动态填充，与患者摘要同时，但是我无法弄清楚如何。我已经调查了服务/缓存以在头部和患者汇总控制器之间共享患者ID，但这似乎不是最好的方法（并且每次我尝试它都会在未经确定后返回到未定义已经将它注入控制器。）

的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 -->

patientSummary.html（其中一个观点）

<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 -->

在controllers.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

controllers.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"
        }
    ];
}]);

Answer 1

您可能需要查看ui-router。 ui-router支持更复杂的模板结构，包括一页中的多个视图。

Answer 2

您可以将标题模板放在ng-view和与globals $ rootScope链接的数据之外，当您更改页面时，您应该从$ rootScope中删除数据以更改标题。

例如，仅查看param ....中的ID。

'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}}

You can see this working in Plunkr

基于单路径的AngularJS多动态视图

2 个答案: