带有 $ionicModal 的 Ionic(angular) 框架中的 MVC 违规答案

【问题标题】：MVC violation in Ionic(angular) framework with $ionicModal带有 $ionicModal 的 Ionic(angular) 框架中的 MVC 违规
【发布时间】：2015-08-15 16:48:42
【问题描述】：

在 Ionic Framework 中使用 $ionicModal 时，我注意到很多人在控制器内实例化 Modal 并将控制器范围传递给 Modal。像这样，

   $ionicModal.fromTemplateUrl("views/call_options_view.html", function ($ionicModal) {

        $scope.menu = $ionicModal;

   }, {

        scope: $scope,
        animation: "slide-in-up"

   });

这样做允许模态调用控制器范围内的方法。有什么方法可以给 Modal 一个单独的控制器吗？现在，使用控制器范围，没有违反 MVC 吗？控制器拥有两个视图。假设我想在另一个控制器上使用相同的模态，那么我将不得不在两个控制器上复制我的模态功能。 MVC 应该改进代码重用。所以本质上，我想通过给我的模态一个单独的控制器来重新执行 MVC。

我想解决这个问题的一种方法是将模式放在根控制器中。这样做，将使其可从所有子控制器访问，并且模态的功能将仅在根控制器中可用。我仍然不喜欢这个修复，因为我不想让我的根控制器因为太多的逻辑而混乱。

还有其他建议吗？

【问题讨论】：

标签： angularjs model-view-controller ionic-framework ionic modalviewcontroller

【解决方案1】：

在尝试提出与您的问题类似的解决方案时，我偶然发现了您的问题。

因为我有一个关于路线导航的problem，所以我决定使用$ionicModal 在模态视图中显示另一个状态的视图。我想出了一个解决方案我crafted there（但我还没有为我的工作环境实现它）应该适用于我的情况，但我对它并不满意。

总而言之，我所有的状态都嵌套在tabs下；当我处于tabs.home 状态时，我想直接显示tabs.settings.sub 状态。但是，tabs.settings.sub 依赖于由其父状态 tabs.settings 填充的数据。因此，我的问题是将我当前状态 (tabs.home) 的范围提供给 tabs.settings.sub。

我的模态使用一个包含我的视图模板的模板：

<script id="templates/modal.html" type="text/ng-template">
  <ion-modal-view>
    <ng-include src="templateUrl" ng-controller="controller"></ng-include>
  </ion-modal-view>
</script>

然后我可以重用该状态的视图。关于范围，我使用$scope.new(true) 隔离它，并用我的模态模板所需的数据填充它：

var subState = $state.get ('tabs.settings.sub');
var subScope = $scope.$new (true); // true: isolate
subScope.title = 'Sub';
subScope.templateUrl = subState.templateUrl;
subScope.controller = function () {
  if (subState.controller)
    return $controller (subState.controller, {$scope:subScope});
  return null;
};

模态是使用这个范围实例化的（我认为这是一个问题：混合模态的范围和控制器的范围）。 controller 必须是返回相应控制器的函数。

$ionicModal.fromTemplateUrl ('templates/modal.html', {
  scope: subScope
}).then (function (modal) {
  modal.show ();
});

我的解决方案的主要问题是将数据传输到视图的控制器以显示（在本例中为SubCtrl）。但它更局限于我的特定上下文：我的模式不知道控制器和状态的继承链，因为这是由 UI 路由器处理的。

我不知道是否可以访问与控制器关联的状态（通常的模式似乎是使用$state.parent，但这里不能使用，如UI router wiki 所述）。

我在这里使用的解决方法（这是我不满意的部分）是通过状态联合数据：

.state ('tabs.settings', {
  data: { status: 'valid' }
}

创建模态时我可以访问它：

subScope.status = subState.data.status;

我可以从父控制器访问它：

$scope.status = $state.current.data.status;

【讨论】：