CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrap
user6002037
user6002037

Reputation:

error with using resolve angular-bootstrap-ui

I am having difficulties combining both the editing of a current contact and the creation of a new contact. I am able to edit the contact that I click on, however, when I try and click on add new address the following error message - 

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

This is due to using resolve based on the answer here

Factory

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

CONTROLLERS

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

Upvotes: 1

Views: 87

Answers (2)

MarcoS
MarcoS

Reputation: 17721

I think you simply miss a module dependency to angular.ui.bootstrap...

Upvotes: 0

fikkatra
fikkatra

Reputation: 5822

You use the same ModalCtrl for both the open and the openEdit function. The open function does not have a resolve parameter. This way, angular cannot resolve the injected editIndex. Try this:

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

Upvotes: 1

Related Questions