使用 resolve angular-bootstrap-ui 时出错

Posted 2023-05-07

【中文标题】使用 resolve angular-bootstrap-ui 时出错

【英文标题】：error with using resolve angular-bootstrap-ui

【发布时间】：2016-08-07 01:36:49

【问题描述】：

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

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

控制器

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

edit-address.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>

【问题讨论】：

不确定您是否只是为了简洁而跳过了它，但 touchnoteCtrl 未在 testCtrl 中声明。否则在这里使用resolve 看不出有什么问题。 ModalCtrl 没有在页面上的其他任何地方引用是吗？

@rom99 抱歉，我已经更新了控制器的名称

【参考方案1】：

您对open 和openEdit 函数使用相同的ModalCtrl。 open 函数没有解析参数。这样，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;
            
       
    );

【讨论】：

这是一种享受！你是个天才，也是个救命恩人！

【参考方案2】：

我认为您只是错过了对 angular.ui.bootstrap 的模块依赖...

【讨论】：

我在app.module中添加了依赖