AngularJS 基于单路由的多个动态视图答案

【问题标题】：AngularJS Multiple Dynamic Views based on Single RouteAngularJS 基于单路由的多个动态视图
【发布时间】：2013-12-10 18:50:15
【问题描述】：

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

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

左侧菜单栏是控制器，标题是控制器，底部（患者摘要）是控制器。我希望它能够像您期望的那样运行——它首先加载标题，然后换出站点的底部 2/3（从摘要到症状、诊断和处方）。所以，点击Start Visit后，它应该会加载下面的片段。

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

在我的每个视图中，患者摘要、症状、诊断和处方测试，在顶部我有 <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"
        }
    ];
}]);

【问题讨论】：

除了 Remcos 响应之外，您还可以有一个控制器用于页面的“部分”和 $broadcast 任何需要相互交流的更改。

标签： javascript angularjs model-view-controller

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以把header模板放到ng-view之外，数据和全局变量$rootScope链接，当你改变页面时，你应该从$rootScope中删除数据来改变header。

例如，仅查看来自 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

【讨论】：