$ ionicModal не может получить доступ к контроллеру

Question

$ ionicModal не может получить доступ к контроллеру

0

Я следую Ионным Книгам, чтобы узнать Ионную. И я пытаюсь сделать ионный модальный. Модальные шоу, как я и ожидал. Однако я обнаружил, что мой модал не может быть закрыт, когда я нажимаю кнопку с атрибутом 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();
  };
})

cosmozhang 04 июнь 2016, в 19:07

Источник

Теги:

javascript

ionic-framework

angularjs

2 ответа

Ещё вопросы

cosmozhang · Answer 1 · 2016-06-04T15-00-00.000Z

Я нашел проблему. Это потому, что я установил параметр $scope, однако имя параметра должно быть scope

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

О, ты побил меня этим. :) Отличная работа!

Jonathan Dupré · Answer 2 · 2016-06-04T14-38-00.000Z

Две вещи, которые я заметил:

1: Второй параметр функции "Ионная модальная услуга" fromTemplateUrl "принимает объект. Одним из свойств этого объекта является "scope" и ожидает объект scope, который вы ему дали ($ scope, в вашем случае). Но вы также написали '$ scope' как имя этого свойства. Следовательно, вы устанавливаете свой объект $ scope scope контроллера как значение свойства, которое не подхвачено модальным, тогда как свойство "scope" остается неопределенным.

{ $scope: $scope }

должно быть

{ scope: $scope }

2: Вы используете логическое значение в вашей функции closeCreateNewTaskModal, но вы забыли объявить его как один из его аргументов.

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

Большое спасибо! Логический аргумент был там раньше, но я удалил его при отладке, забудь об этом. :)