javascript - 使用解析 Angular-bootstrap-ui 时出错

Question

我在编辑当前联系人和创建新联系人时遇到困难。我可以编辑我单击的联系人，但是，当我尝试单击添加新地址时，出现以下错误消息 -

angular.js:13424 Error: [$injector:unpr] http://errors.angularjs.org/1.5.3/$injector/unpr?p0=editIndexProvider%20%3C-%20editIndex%20%3C-%20ModalCtrl

这是由于使用了基于 answer here 的 resolve

工厂

'use strict';
var app = angular.module('testApp', ['ngRoute','ui.bootstrap']);

app.factory('addressFactory', function(){
    var addressFactory = {};
    addressFactory.addressBook = [];

addressFactory.saveAddress = function(name, address){
    addressFactory.addressBook.push({
        name: name, 
        address: address 
    });
};

addressFactory.updateAddress = function(name, address, index){
    addressFactory.addressBook[index] = {
        name: name, 
        address: address
    };
};
    return addressFactory;
})

Controller

.app.controller('testCtrl', ['$uibModal', 'addressFactory', function ($uibModal, addressFactory) {

    var testCtrl = this;
    this.addressBook = addressFactory.addressBook;

    this.open = function () {
        touchnoteCtrl.modalInstance = $uibModal.open({
            templateUrl: 'app/views/partials/add-address.html',
            controller: 'ModalCtrl',
            controllerAs:'ctrl'
        });
    }

    this.openEdit = function(index) {
        touchnoteCtrl.modalInstance = $uibModal.open({
            templateUrl: 'app/views/partials/edit-address.html',
            controller: 'ModalCtrl',
            controllerAs:'ctrl',
            resolve: {
                editIndex: function () {
                    return index;
                }
           }
        });
    }
}])

.controller('ModalCtrl', ['$uibModalInstance','addressFactory','editIndex', function ($uibModalInstance,addressFactory, editIndex) {

    this.addressBook = addressFactory.addressBook;

    this.saveAddress = function( name, address) {
         addressFactory.saveAddress( name, address);
         $uibModalInstance.dismiss('cancel');
    }

    this.getIndex = editIndex;
    console.log(this.getIndex)

    this.updateAddress = function(name, address, index) {
         addressFactory.updateAddress( name, address, index);
    }

    this.cancelAddress = function () {
        $uibModalInstance.dismiss('cancel');
    };

}]);

HTML

home.html

 <a ng-click="ctrl.open()">Enter new address</a>

 <div ng-repeat="contact in ctrl.addressBook track by $index"> 
    <p class="contactName">{{contact.name}}</p>
    <p class="contactAddress">{{contact.address}}</p>
    <button ng-click="ctrl.openEdit($index)">Edit Contact</button>
 </div>

form.html

<form>
     <input ng-model="ctrl.name" type="text">        
     <input ng-model="ctrl.address" type="text">
</form>

编辑地址.html

<h3>Edit address</h3>
<div ng-include="'app/views/partials/form.html'"></div>
<div>
    <button ng-click="ctrl.cancelAddress()">Cancel</button>
    <button ng-click="ctrl.updateAddress(ctrl.name, ctrl.address, ctrl.getIndex)">Save</button>
</div>

add-address.html

<h3>Add address</h3>
<div ng-include="'app/views/partials/form.html'"></div>
<div>
    <button ng-click="ctrl.cancelAddress()">Cancel</button>
    <button ng-click="ctrl.addAddress(ctrl.name, ctrl.address)">Save</button>
</div>

Answer 1

您对 open 和 openEdit 函数使用相同的 ModalCtrl。 open 函数没有解析参数。这样，Angular就无法解析注入(inject)的editIndex。试试这个:

this.open = function () {
    touchnoteCtrl.modalInstance = $uibModal.open({
        templateUrl: 'app/views/partials/add-address.html',
        controller: 'ModalCtrl',
        controllerAs:'ctrl',
        resolve: {
            editIndex: function () {
                return undefined;
            }
       }
    });
}