Question

我正在为离子vs1 / angularjs项目添加一个简单的待办事项列表。我想使用离子模态来启动此列表。由于我需要从任何地方启动它，我寻找一种方法来做到这一点。我发现这篇文章https://medium.com/@saniyusuf/create-an-isolate-modal-with-ionic-v1-b4cf73f05727让我创建了一个可以从任何控制器启动的工厂。爱它！问题是，这是一个todo列表，用户需要能够添加/删除。我想将此信息保存到firebase，因此我创建了一个工厂来保存ToDo列表的所有firebase crud操作。所以我现在有一个工厂启动模态和一个具有firebase crud操作的工厂。在模态启动器中，我想出了如何包含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());
    });
  }

 }
});

从控制器调用

$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

如何获取输入值？

回复承诺：

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

如何从模态

1 个答案: