javascript - 如何从模态返回值

Question

我正在向我的 ionic vs1/angularjs 项目添加一个简单的待办事项列表。 我想使用 ionic 模式来启动这个列表。由于我需要从任何地方启动它，所以我寻找一种方法来做到这一点。 我找到这篇文章https://medium.com/@saniyusuf/create-an-isolate-modal-with-ionic-v1-b4cf73f05727这让我创建了一个可以从任何 Controller 启动的工厂。爱它! 问题是，它是一个待办事项列表，用户需要能够在其中添加/删除。 我想将此信息保存到 Firebase，因此我创建了一个工厂来保存 ToDo 列表的所有 Firebase CRUD 操作。 因此，我现在拥有一家启动 modal 的工厂和一家拥有 firebase crud 操作的工厂。 在模式启动器中，我弄清楚了如何包含增删改查操作，以便按钮能够交互。问题是如何获取输入的值。

模态启动器

 angular.module('formulaWizard')
   .factory('IsolateModal', IsolateModal)
 IsolateModal.$inject = ['$rootScope', '$ionicModal', '__ToDo', 
 '$window'];

function IsolateModal($rootScope, $ionicModal, __ToDo, $window) {


var modalsIsolateScope = $rootScope.$new();
var currentUser = $rootScope.currentUser || JSON.parse($window.sessionStorage.getItem('payload')); 

var isolateModal = {
  open: open
};

function open() {
  $ionicModal.fromTemplateUrl(
    'app/to-do/toDo.html',
    {
      scope: modalsIsolateScope
    }
  )
    .then(function (modalInstance) {
      modalsIsolateScope.close = function () {
        closeAndRemove(modalInstance);
      },
      modalsIsolateScope.add = function(){
        addTodo(modalInstance);
      };
      return modalInstance.show();
  });

}

function closeAndRemove(modalInstance) {
  return modalInstance.hide()
    .then(function () {
      return modalInstance.remove();
    });
}
  function addTodo(modalInstance) {
    var i = modalInstance

      __ToDo.toDo($scope.input)
        .then(function(result) {
          $scope.input = {};
          // Reload our todos, not super cool
          getAllTodos();
        });
    }


   return isolateModal;

 }

我的数据工厂

 angular.module('formulaWizard')
.factory('__ToDo', function(__Refs, $q) {
return {
  toDo: function(id, userObject, cb) {
    var toDo = __Refs.userNotes.child(id).push(userObject);
    __Refs.userNotes.child(id).child(newToDo.key()).update({ toDo_id: 
 newToDo.key() }).then(function(response) {
      cb(response);
    }, function(e) {
      console.error('error occured');
    });;
  },
  updateToDo: function(userId, toDoId, userObject, cb) {
    var x = 
  __Refs.userNotes.child(userId).child(toDoId).update(userObject)
  .then(function(response) {
      cb(response);
    }, function(e) {
      console.error('Error editing');
    });
  },
  deleteToDo: function(userId, toDoId, cb) {
    __Refs.userNotes.child(userId).child(toDoId).remove(function(error) {
      if (error) {
        console.error(error);
      } else {
        cb();
      }
    });
  },
  getuserNotes: function(id, cb) {
    __Refs.userNotes.child(id).on('value', function(response) {
      cb(response.val());
    });
  }

 }
});

来自 Controller 的调用

$scope.openModal = function () {
        IsolateModal.open();

    };

HTML

<ion-modal-view>
<ion-header-bar class="bar-stable">
<h1 class="title">My List</h1>
<button class="button icon ion-close-round button-icon" 
   ng-click="close()"></button>
 </ion-header-bar>
  <ion-content>
   <div class="list card" style="width:100%; margin-left:0;">
   <div class="item item-body">
    <div class="item-input-inset">
      <label class="item-input-wrapper">
        <input id="newInput" type="text" placeholder="New Todo" 
         ng-model="input.name">
      </label>
      <button class="button button-balanced button-small" ng-click="add()">
        Add Todo
           </button>
        </div>
         <ion-list can-swipe="true">
           <ion-item ng-repeat="item in todos">
             {{item.name}}
             <ion-option-button class="button-assertive" ng-click="deleteTodo(item.id)">
               Delete
              </ion-option-button>
           </ion-item>
         </ion-list>
       </div>
      </div>
   </ion-content>
 </ion-modal-view>

如何将 html 页面的输入值获取到工厂中？

谢谢

Answer 1

how do I get the value of the input?

返回 promise :

function open() {
   ̲r̲e̲t̲u̲r̲n̲ $ionicModal.fromTemplateUrl(
    'app/to-do/toDo.html',
    {
      scope: modalsIsolateScope
    }
  )
    .then(function (modalInstance) {
      modalsIsolateScope.close = function () {
        closeAndRemove(modalInstance);
      },
      modalsIsolateScope.add = function(){
        addTodo(modalInstance);
      };
      return modalInstance.show();
  });

}

然后从 Promise 中提取返回值:

$scope.openModal = function () {
    var promise = IsolateModal.open();
    promise.then(function(value) {
        console.log(value);
    });
    return promise;
};