Question

我正在跟随Ionic Books学习离子。而我正试图制作离子模态。模态显示我的预期。但是，当我在模态视图中单击带有属性ng-click="closeCreateNewTaskModal()"的按钮时，我发现我的模态无法关闭。似乎我无法访问$scope的变量成员。所以我猜模态视图无法进入我的控制器。但我不知道为什么？

我的HTML的正文部分：

<body ng-app="starter" ng-controller="TodoCtrl">

<ion-side-menus>
  <ion-side-menu-content>
    <ion-header-bar class="bar-dark">
      <h1 class="title">Ionic Blank Starter</h1>
      <button class="button button-icon" ng-click="openCreateNewTaskModal()"><i class="icon ion-compose"></i></button>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item ng-repeat="task in s.currentProject.tasks">{{task.name}}</ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu-content>
  <ion-side-menu side="left">
    <ion-header-bar class="bar-dark">
      <h1 class="title">Projects</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item ng-repeat="project in projectList" ng-click="s.currentProject = project">{{project.name}}</ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

<script id="new-task.html" type="text/ng-template">
  <ion-modal-view>
    <ion-header-bar class="bar-secondary">
      <h1 class="title">Add Task</h1>
      <button class="button button-clear button-positive" ng-click="closeCreateNewTaskModal(false)">Cancel</button>
    </ion-header-bar>
    <ion-content>
      <form ng-submit="closeCreateNewTaskModal(true)">
        <div class="list">
          <label class="item item-input">
            <input type="text" ng-model="newTask.name">
          </label>
        </div>
      </form>
      <div class="padding">
        <button type="submit" class="button button-block button-positive">Create</button>
      </div>
    </ion-content>
  </ion-modal-view>
</script>

</body>

我app.js中的控制器：

.controller('TodoCtrl', function ($scope, $ionicModal) {
  $scope.projectList = [
    {
      name: "Android",
      tasks: [
        { name: "Download Android Studio" },
        { name: "Download ADK" },
        { name: "Build Gradle" },
        { name: "Deploy the App" }
      ]
    },
    {
      name: "iOS",
      tasks: [
        { name: "Download XCode" },
        { name: "Start simulator" }
      ]
    }
  ];
  $scope.s = {};
  $scope.s.currentProject = $scope.projectList[0];

  $scope.modal = null;
  $ionicModal.fromTemplateUrl("new-task.html", {
    $scope: $scope,
    animation: "slide-in-up"
  }).then(function (modal) {
    $scope.modal = modal;
  });

  $scope.openCreateNewTaskModal = function () {
    console.log("openCreateNewTaskModal");
    $scope.newTask = {
      name: "Abc"
    };
    if ($scope.modal) $scope.modal.show();
  };
  $scope.closeCreateNewTaskModal = function () {
    console.log("closeCreateNewTaskModal");
    if (false) {
      $scope.s.currentProject.tasks.push(angular.extend({}, $scope.newTask));
    }
    if ($scope.modal) $scope.modal.hide();
  };
})

Answer 1

我发现了问题。这是因为我设置了$scope选项，但选项名称应为scope

  $ionicModal.fromTemplateUrl("new-task.html", {
    $scope: $scope,  // this should be `scope`
    animation: "slide-in-up"
  }).then(function (modal) {
    $scope.modal = modal;
  });

Answer 2

我发现了两件事：

1：离子模式服务＆＃39; fromTemplateUrl＆＃39; function的第二个参数接受一个对象。该对象的一个属性是＆＃39;范围＆＃39;并期望一个范围对象，你给它（在你的情况下为$ scope）。但是你也写了“范围”＆＃39;作为该财产的名称。因此，您将控制器的$ scope对象设置为模态未拾取的属性的值，而范围＆＃39;范围＆＃39;财产仍然未定义。

{ $scope: $scope }

应该是

{ scope: $scope }

2：你在closeCreateNewTaskModal函数中使用了一个布尔值，但你忘了将它声明为它的一个参数。

closeCreateNewTaskModal(hastask) { 
            if(!hasTask) { ... } ... }

$ ionicModal无法访问控制器

2 个答案: