Angularjs - 在一個控制器中的角度UI $模態和$ modalInstance

我想問，據我所知，AngularUI的模態由2個控制器組成1是我用來處理數據的默認控制器，另一個是處理$ modelInstances ，這對我來說很好。但是我想要做的是在模態顯示中渲染/編輯數據時，我將使用幾個示波器。而不是解決控制器之間的所有這些範圍，我試圖做的是將兩個控制器合併在一起，以便範圍可以在網頁之間共享。（指出，它實時的範圍），我所做的是像下面

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

我結合這兩個控制器合爲一體，並注入相關的模塊回來，這是可行的，在理論上。但是，我得到的是一個錯誤，說[$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance <- ModelCtrl。從這個錯誤瞭解這意味着我已經注入了一個未知的供應商$modalInstanceProvider，所以我試圖從模塊中刪除$ modalInstance，莫代爾設法打開，但close和dismiss的行動給我一個錯誤$modalInstance is not defined。我做錯了什麼，我應該如何結合兩個控制器，而不是將它們分成2個？

這裏是plunkr鏈接，所以你可以理解我的意思。謝謝。

來源

2015-08-17 Kenny Yap

我希望這是不行的，我不喜歡模式彈出angularjs –

不，你不能使用'$ model'和'$ modalInstance'在同一個控制器。 –

@gauravbhavsar有沒有其他選擇？ –

您不必爲創建一個新的控制器中創建模式只是這樣做：

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

看到，我並沒有注入$modalInstance

然後創建模式是這樣：

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

然後你使用你創建的modalInstance來操縱mod人

所以最後的代碼是

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

來源

2016-05-12 07:32:44 MuDi

我上面的回答檢查，但modalInstance接近是行不通的。所以改變了下面的代碼，現在就開始工作。

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

來源

2018-01-19 06:30:10 user3921084

Angularjs - 在一個控制器中的角度UI $模態和$ modalInstance

回答

相關問題