Meanjs中的Angular UI Modal Controller弹出窗口

Question

Problem: I have a modal screen to edit the list data in a meanjs application. I used the yo generator for the CRUD operation. In the edit view I have a modal which has a separate controller which I have a separate file in the controllers folder.

I'm new with angularjs 1. I can't get the modal to pop-up. Are there any errors in my code?

I got the following errors in the console.

angular.js:11706 Error: [$injector:unpr] Unknown provider: customerResolveProvider <- customerResolve <- CustomersController

// list-customer.client.view.html

<section data-ng-controller= "CustomersController as customersCtrl">
  <div class="page-header">
    <h1>Customers</h1>
  </div>
  <!--Search bar-->
  <div class="col-xs-12 col-sm-8">
    <div class="input-group input-group-lg">
      <input type="text" class="form-control" placeholder="Search for..." ng-model="searchText">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-4 text-center">
      <button type="button" class="btn btn-success text-center">
        <i class="glyphicon glyphicon-user"></i><br>
        New Customer
      </button>
    </div>
  </div>

  <div class="list-group">
    <div class="col-xs-6 col-sm-4" data-ng-repeat="customer in vm.customers | filter:searchText">
      <a ng-click="customersCtrl.modalUpdate('lg', customer)" 
        class="list-group-item">
        <h4 class="cust-list text-center">
          <i class="glyphicon glyphicon-user"></i>
        </h4>
        <div class="row">
          <div class="col-xs-10 col-xs-offset-1">
            <h4>{{customer.firstName}} {{customer.lastName}}</h4>
            <small class="list-group-item-text text-muted">
              <span data-ng-bind="customer.created | date:'mediumDate'"></span>
            </small>
          </div>
        </div>
      </a>
    </div>

    <div class="alert alert-warning text-center" data-ng-if="vm.customers.$resolved && !vm.customers.length">
      No Customers yet, why don't you <a data-ui-sref="customers.create">create one</a>?
    </div>

    <!--<small class="list-group-item-text">-->
    <!--  {{customer.firstName}}-->
    <!--  Posted on-->
    <!--  <span data-ng-bind="customer.created | date:'mediumDate'"></span>-->
    <!--  by-->
    <!--  <span data-ng-if="customer.user" data-ng-bind="customer.user.displayName"></span>-->
    <!--  <span data-ng-if="!customer.user">Deleted User</span>-->
    <!--</small>-->


</section>

// customers.client.controller.js

(function () {
  'use strict';

  // Customers controller
  angular
    .module('customers')
    .controller('CustomersController', CustomersController);

  CustomersController.$inject = ['$scope', '$state', 'Authentication', 'customerResolve', '$uibModal', '$log'];

  function CustomersController ($scope, $state, Authentication, customer, $uibModal, $log) {
    // serialize forms
    var vm = this;

    vm.authentication = Authentication;
    vm.customer = customer;
    vm.error = null;
    vm.form = {};
    vm.remove = remove;
    vm.save = save;
    // vm.customers = customer.query();

    // Open a modal window to update a single customer record
    this.modalUpdate = function (size, selectedCustomer) {

      var modalInstance = $uibModal.open({
        animation: $scope.animationsEnabled,
        templateUrl: 'modules/customers/client/views/form-customer.client.view.html',
        controller: function ($scope, $uibModalInstance, customer) {
          $scope.customer = customer;
        },
        size: size,
        resolve: {
          items: function () {
            return $scope.selectedCustomer;
          }
        }
      });

      modalInstance.result.then(function (selectedItem) {
        $scope.selected = selectedItem;
      }, function () {
        $log.info('Modal dismissed at: ' + new Date());
      });
    };

    // Remove existing Customer
    function remove() {
      if (confirm('Are you sure you want to delete?')) {
        vm.customer.$remove($state.go('customers.list'));
      }
    }

    // Save Customer
    function save(isValid) {
      if (!isValid) {
        $scope.$broadcast('show-errors-check-validity', 'vm.form.customerForm');
        return false;
      }

      // TODO: move create/update logic to service
      if (vm.customer._id) {
        vm.customer.$update(successCallback, errorCallback);
      } else {
        vm.customer.$save(successCallback, errorCallback);
      }

      function successCallback(res) {
        $state.go('customers.view', {
          customerId: res._id
        });
      }

      function errorCallback(res) {
        vm.error = res.data.message;
      }
    }
  }
})();

Answer 1

Move the modal logic and dependencies to the same controller that's being called in your routes(in this case, list-customers.client.controller.js ).

You can't use data-ng-controller= "CustomersController as customersCtrl" because one of the dependencies require a resolve function, which is only available in the routes.js file.