Question

我试图使用ui-bootstrap模式在AngularJS中进行CRUD操作。

我想我没有想到设置Controller的继承，每次我尝试打开一个模态并调用Children Controller我都会收到错误：

Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance <- ChildCtrl

父视图如下所示：

<div ng-controller="ParentCtrl">
    <div>
        stuff to handle items.
    </div>

      <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
          </div>
          <div class="modal-body">
          </div>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>
</div>

子视图：

    <div class="modal-content" ng-controller="ChildCtrl">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"  ng-click="close()" >
            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
          </button>
        <h4>Delete</h4>
      </div>
      <form name="deleteForm" ng-submit="delete()">
      <div class="modal-body">
some info about the model here
      </div>
        <div class="modal-footer">
              <input class="btn" value="Delete" type="submit"/>
        </div>
      </form>
    </div>

父控制器如下所示：

myApp.controller('ParentCtrl', ['$scope', '$modal', function ($scope, $modal) {

    //some stuff here
    $scope.delete = function (item, size) {
        $scope.modalInstance = $modal.open({
            templateUrl: 'views/delete.html',
            controller: 'ChildCtrl',
            size: size,
            resolve: {
                item : function () {
                    return item
                }
            }
        });
    };
    //some stuff here
}]);

和孩子一样，这样：

myApp.controller('ChildCtrl', ['$scope','$modalInstance', 'item', 'ItemService', function ($scope, $modalInstance, item, ItemService) {

    $scope.delete = function () {
        ItemService.delete({ id: item.id }, function () {
            $modalInstance.close();
            $scope.$emit('itemUpdate');
        })
    };
}]);

提前致谢！

Answer 1

从子视图中删除ng-controller指令。替换这一行：

 <div class="modal-content" ng-controller="ChildCtrl">

到

<div class="modal-content" >


<script type="text/ng-template" id="delete.html">
 //include child view here.
</script>

您的代码应该是：

<div ng-controller="ParentCtrl">
    <div>
        stuff to handle items.
    </div>
    /* here your html correspond to parent controller end */
    /*include child template here*/
    <script type="text/ng-template" id="delete.html">
     //include modal popup html code here.
     <div class="modal-content" >

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"  ng-click="close()" >
            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
          </button>
        <h4>Delete</h4>
      </div>
      <form name="deleteForm" ng-submit="delete()">
      <div class="modal-body">
some info about the model here
      </div>
        <div class="modal-footer">
              <input class="btn" value="Delete" type="submit"/>
        </div>
      </form>
    </div>
    </script>

</div>

AngularJS - 无法在模态调用上实例化Controller

1 个答案: