Javascript 使用解析角度引导ui时出错

我很难将编辑当前联系人和创建新联系人结合起来。我可以编辑我单击的联系人，但是，当我尝试单击添加新地址时，会显示以下错误消息-

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

这是由于基于

工厂

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

控制器

.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>
     <input ng-model="ctrl.name" type="text">        
     <input ng-model="ctrl.address" type="text">
</form>

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

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

输入新地址
{{contact.name}
{{contact.address}
编辑联系人

form.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>
     <input ng-model="ctrl.name" type="text">        
     <input ng-model="ctrl.address" type="text">
</form>

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

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

编辑地址.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>
     <input ng-model="ctrl.name" type="text">        
     <input ng-model="ctrl.address" type="text">
</form>

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

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

编辑地址
取消
拯救

添加地址.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>
     <input ng-model="ctrl.name" type="text">        
     <input ng-model="ctrl.address" type="text">
</form>

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

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

添加地址
取消
拯救

对于

open

和

openEdit

功能，您使用相同的

ModalCtrl

。

open

功能没有resolve参数。这样，angular无法解析插入的

editIndex

。试试这个：

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

---

我认为您只是错过了对

angular.ui.bootstrap

…

的模块依赖关系，不确定您是否只是为了简洁起见跳过了它，但是

touchnoteCtrl

中没有声明

testCtrl

。否则，在此处使用

resolve

不会有太多错误

ModalCtrl

没有在页面上的任何其他地方引用，是吗？@rom99抱歉，我已经更新了控制器的名称。我已经在

app.module

中添加了依赖项。这是一种享受！你是个天才，是个救命恩人！