在ui路由器父状态中使用resolve

时间:2015-08-28 23:01:13

标签: angularjs angular-ui-router

我试图使用Angular JS来使用简单患者DB的web api,其中每个患者都有一份药物清单。 每种药物和患者都有自己的添加,编辑和列表操作。 当我尝试编辑病人时,我添加了添加新药的选项(这也应该是对患者条目的编辑)。 所以我使用了嵌套状态的嵌套状态概念,其中患者编辑是父状态,而patientedit.Medications是子状态,如下所示:

.state("patientEdit", {
    abstract: true ,
    url: "/patient/edit/:PatID",
    templateUrl: "app/patients/patientEditView.html",
    controller: "PatientEditCtrl as vm",
    resolve: {
        patientResource: "patientResource",

        patient: function (patientResource, $stateParams) {

            console.log("the value of PatID is " + PatID);
            console.log("Patient Edit is called ???")
            return patientResource.get(
                { PatID: PatID }).$promise;

        }
    }
})

.state("patientEdit.Medications", {
    url: "/medications/:MedID/:PatID",
    templateUrl: "app/patients/patientEditMedicationsView.html",
    controller: "medicationEditCtrl as vm",
    resolve: {
        medicationResource: "medicationResource",

        medication: function (medicationResource, $stateParams) {
            var MedID = $stateParams.MedID;
            var PatID = $stateParams.PatID;
            console.log("the value of PatID is " + PatID);
            console.log("the value of MedID is " + MedID);
            console.log("Medication Edit is called ???");
            return medicationResource.getMedication(
                { MedID: MedID, PatID: PatID }).$promise;

        }
    }
})

在点击患者详细视图中的按钮时,我转换到创建药物(上面代码中的子状态,如下所示)

<a class="btn btn-primary"
    data-ui-sref="patientEdit.Medications({MedID: 0, PatID: vm.patient.ID})"
    style="width:160px">
     Creat New Medicine
</a>

我已经从堆栈中的几个帖子中了解了流和嵌套状态的文档,子状态将等到父状态的解析,并且我可以在子状态中使用父状态的已解析父对象控制器。 发生了什么后,我点击了新药的按钮,并根据开发工具中的网络选项卡,父状态的患者和子状态的药物都已正确解决(根据开发工具网络的响应选项卡) ,但没有过渡 发生在任何地方。

修改 这是我所使用的上述状态的控制器: patientEditCtrl.JS:

(function () {

angular.module("patientManagement")
   .controller("PatientEditCtrl",
                [ "patient", "$state", PatientEditCtrl]);

function PatientEditCtrl(patient, $state) {
    var vm = this;
   // vm.title = "Editing";
    vm.patient = patient;
    if (patient == null)
    {
        vm.title = "New medication";
    }
    else {
        console.log("here is the Parent controller of editing");
    if (  (vm.patient.ID ) ) {
        console.log("here is the controller of editing");
        vm.title = "Edit: " + vm.patient.Name;
    }
    else {
        console.log(vm.patient.Id);
        vm.title = "New Patient";
    }
    }
    vm.submit = function () {
        vm.patient.$save();
    }
    vm.cancel = function () {
        $state.go('patientList');
    } 

}

}());

medicationEditCtrl.Js

(function () {

    angular.module("patientManagement")
       .controller("medicationEditCtrl",
                    ["medication", "$state", medicationEditCtrl]);

    function medicationEditCtrl(medication, $state) {
        var vm = this;
        vm.medication = medication;
        console.log("we are in medication edit CTRL");
        if ((vm.medication.MedID)) {
            console.log("here is the controller of editing a medication ");
            vm.title = "Edit: " + vm.medication.Name;
        }
        else {
            console.log(vm.medication.MedID);
            console.log("having a patientId of " + vm.medication.PatID);
            vm.title = "New Medication";
        }
        vm.submit = function () {
            vm.medication.$save();
        }
        vm.cancel = function () {
            $state.go('patientList');
        }



    }

}());

1 个答案:

答案 0 :(得分:0)

这是我正在使用的服务:

(function () {

"use strict";
angular.module("common.services")
       .factory("patientResource", ["$resource", patientResource]);

function patientResource($resource) {
    console.log("service is called");
    return $resource("http://localhost:49190/api/patients/:Id");

};

}());

虽然我使用(PatId)调用它,所以所需的解决方案是在名为&#34; patientEdit&#34;的状态的解析中更改服务调用。如下:

return patientResource.get({ Id: PatID }).$promise;

再次感谢您的时间和回复