关闭md-dialog后,将项目推送到数组

时间:2016-03-21 14:42:43

标签: angularjs angular-material

通过md-dialog推送项目后数组不会刷新,但我可以正常保存该项目。

我试图测试哪个级别可以手动将项目推入数组中,我可以这样做直到$scope.showAddUsuario(),之后我无法推送项目,甚至手动:

Usuario.html

<div flex-gt-sm="100" flex-gt-md="100" ng-controller="UsuarioCtrl">
    <h2 class="md-title inset">Usuario</h2>
    <md-card> 
    <md-list> 
    ...         
    </md-list> 
    </md-card>
    <md-button class="md-fab" aria-label="Add" ng-click="showAddUsuario($event)">
    <md-icon md-svg-icon="content:ic_add_24px" aria-label="Plus"></md-icon>
    </md-button> 
</div>

MD-对话框:

<md-dialog aria-label="Form">
   <md-content class="md-padding">
      <form name="userForm">
         <div layout layout-sm="column">
            <md-input-container flex> <label>Nome</label> <input ng-model="item.nome"> </md-input-container>
         </div>  
         <div layout layout-sm="column">
            <md-input-container flex> <label>E-mail</label> <input ng-model="item.email"> </md-input-container>
         </div>  
         <div layout layout-sm="column">
            <md-input-container flex> <label>Senha</label> <input ng-model="item.senha"> </md-input-container>
         </div>  
     </form>
   </md-content>
   <div class="md-actions" layout="row">
      <span flex></span> 
      <md-button ng-click="cancel()"> Cancel </md-button>
      <md-button ng-click="saveUsuario(item)" class="md-primary"> Save </md-button>
   </div>
</md-dialog>

控制器:

app.controller('UsuarioCtrl', function ($scope, $http, $mdDialog, $interval, $timeout) {

     $scope.items = [];                         
        $http({
            method : 'GET',
            url : 'UsuarioServlet'
        })
                .success(
                        function(data, status, headers,
                                config) {
                             $scope.items = data;
                        }).error(
                        function(data, status, headers,
                                config) {
                            // called asynchronously if an error occurs
                            // or server returns response with an error status.
                        }); 

$scope.saveUsuario = function(item) {

    $scope.items.push({id:100, nome:item.nome, email:item.email, senha:item.senha, status:1});

};  

$scope.showAddUsuario = function(ev) {

            $mdDialog.show({
                controller: 'UsuarioCtrl',
                templateUrl : 'CrudUsuario.html',
                targetEvent : ev,
                locals : {
                    item : null
                }

            })
        };             
    });

3 个答案:

答案 0 :(得分:0)

现在我才发现你使用的是$ mdDialog而不是$ modal。所以这个答案很可能不适用于你的情况。

但您似乎错过了代码中的.finally()部分。 从手册(https://material.angularjs.org/latest/api/service/$mdDialog

$mdDialog
    .show( alert )
    .finally(function() {
      alert = undefined;
    });

所以你可以试试。 否则,您是否考虑过使用$ modal?

您似乎没有处理模式中的信息返回。

(function (){
    'use strict';

    function myCtrl($modal){
        var vm = this;
        vm.myArray = [];
        ...

        function openModal(){
            var modalInstance = $modal.open({
                templateUrl: 'path/to/modal/view.html',
                controller: 'MyModalCtrl as vm',
                size: 'lg',
                resolve: {
                    data: function(){
                        return dataThatYouWantToSendFromHereToYourModal;
                    }
                }
            });

            modalInstance.result.then(function (result){
                vm.myArray.push(result);
            });
        }
        ...
    }
...
})();

当您在模态控制器(在这种情况下为modalIntsance.result.then)发出MyModalCtrl来电时,$modalInstance.close(sendThisDataBackToCallingController)会触发。

因此模态控制器应该沿着

的方向看
...
function MyModalCtrl($modalInstance, data){
    ...
    function init(){
       doSomethingWithDataThatYouGotFromTheCallingController(data);
    }
    ...
    function save(){
        var dataToSendBack = {...};
        $modalInstance.close(dataToSendBack);
    }
    ...
}
...

这应该让你朝着正确的方向前进。

答案 1 :(得分:0)

感谢您的评论!文档说使用它:

})。then(function(item){                 $ scope.items.push({id:100,nome:item.nome,email:item.email,senha:item.senha,status:1});             });

工作正常!

答案 2 :(得分:0)

我解决了这个问题,请将$ mdDialog.show()替换为

$mdDialog.show({

controller: function (){
 this.parent = $scope;
},
  templateUrl: 'dialog1.tmpl.html',
  scope:$scope.$new(),
  targetEvent : ev,
  bindToController: true,
  clickOutsideToClose:true,
  fullscreen: useFullScreen

})