Helpex - Trao đổi & giúp đỡ Đăng nhập
5

Tôi muốn hỏi, tôi hiểu rằng phương thức của AngularUI bao gồm 2 bộ điều khiển 1 là bộ điều khiển mặc định mà tôi sử dụng để xử lý dữ liệu và bộ điều khiển còn lại để xử lý $ modelInstances, điều này ổn đối với tôi. Nhưng những gì tôi muốn làm là tôi có một số phạm vi mà tôi sẽ sử dụng trong khi kết xuất / chỉnh sửa dữ liệu trong màn hình phương thức của mình. Thay vì giải quyết tất cả các phạm vi này giữa các bộ điều khiển, điều tôi đã cố gắng làm là hợp nhất cả hai bộ điều khiển với nhau để các phạm vi có thể được chia sẻ giữa các trang web. (Lưu ý rằng nó là phạm vi thời gian thực) Những gì tôi đã làm như dưới đây

angular.module('app', ['ngAnimate', 'ui.bootstrap']);
angular.module('app').controller('ModelCtrl', function ($scope, $modal, $modalInstance) {

  $scope.items = ['item1', 'item2', 'item3'];
  //I have a few more scopes to be used in the model

  $scope.open = function (size) {

    var modalInstance = $modal.open({
      animation: true,
      templateUrl: 'myModalContent.html',
      controller: 'ModelCtrl',
      size: 'lg',
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function () {

    }, function () {

    });
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

Tôi đã kết hợp cả hai bộ điều khiển thành một và đưa các mô-đun liên quan trở lại để nó hoạt động, về mặt lý thuyết. Nhưng thay vào đó những gì tôi nhận được là một lỗi nói [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance <- ModelCtrl. Hiểu từ lỗi này có nghĩa là tôi đã đưa vào một nhà cung cấp không xác định, $modalInstanceProvidervì vậy tôi đã cố gắng xóa $ modalInstance khỏi các mô-đun, Modal đã quản lý để mở nhưng hành động cho closedismissném cho tôi lỗi $modalInstance is not defined. Tôi đã làm gì sai và làm cách nào để kết hợp cả hai bộ điều khiển thay vì tách chúng thành 2?

đây là liên kết plunkr để bạn có thể hiểu ý tôi. cảm ơn bạn.

5 hữu ích 5 bình luận 17k xem chia sẻ
1

Bạn không phải tạo bộ điều khiển mới cho phương thức đã tạo mà chỉ cần thực hiện điều này:

angular.module('app').controller('ModelCtrl', function ($scope, $modal) {

thấy rằng tôi đã không tiêm $modalInstance

sau đó tạo phương thức giống như:

var modalInstance = $modal.open({
  animation: true,
  templateUrl: 'myModalContent.html',
  size: 'lg',
  scope: $scope, //i make modal scope the same as  ModelCtrl scope
});

sau đó bạn sử dụng modalInstancemà bạn đã tạo để điều khiển phương thức

vì vậy mã cuối cùng là

angular.module('app', ['ngAnimate', 'ui.bootstrap']);
angular.module('app').controller('ModelCtrl', function ($scope, $modal) {

  $scope.items = ['item1', 'item2', 'item3'];
  //I have a few more scopes to be used in the model

  $scope.open = function (size) {

    var modalInstance = $modal.open({
      animation: true,
      templateUrl: 'myModalContent.html',
      size: 'lg',
      scope: $scope
    });

    modalInstance.result.then(function () {

    }, function () {

    });
  };

  $scope.ok = function () {
    modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    modalInstance.dismiss('cancel');
  };
});
1 hữu ích 0 bình luận chia sẻ
0

Tôi đã kiểm tra câu trả lời ở trên, nhưng modalInstance close không hoạt động. Vì vậy, đã thay đổi mã như dưới đây, nó đang hoạt động.

$scope.open = function() {
$scope.$modalInstance = $modal.open({
    scope: $scope,
    templateUrl: "modalContent.html",
    size: '',
}
};

$scope.ok = function() {
    $scope.$modalInstance.close();
};

$scope.cancel = function() {
    $scope.$modalInstance.dismiss('cancel');
};
0 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ angularjs angular-ui , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading