Angular не обновляет цикл из-за реализации $ mdDialog (Material Design)

Question

Angular не обновляет цикл из-за реализации $ mdDialog (Material Design)

0

Основываясь на моем предыдущем сообщении: Angular loop не обновляется, я немного обновил код, чтобы добавить диалоговое окно к кнопке aa user.

единственное изменение в моем файле app.js - это директива по добавлению поля $ mdDialog. поэтому полный код для моего файла app.js:

var app = angular.module('AddUser', ['ngMaterial']);

app.controller('AppCtrl', function($scope, $http, $mdDialog){
$scope.userInfo =  [];

/** function to add details for a user in mysql referecing php **/
$scope.save_user = function() {
    $http.post('db.php?action=add_user', 
        {
            'user_name'  : $scope.user_name, 
            'user_email' : $scope.user_email
        }
    )

    .success(function (data, status, headers, config) {
        $scope.userInfo.push(data);
        $scope.get_user(); //this will fetch latest record from DB
        console.log("The user has been added successfully to the DB");
        console.log(data);
    })

    .error(function(data, status, headers, config) {
        console.log("Failed to add the user to DB");
    });
}

/** function to get info of user added in mysql referencing php **/
$scope.get_user = function() {
    $http.get('db.php?action=get_user').success(function(data)
    { 
        $scope.userInfo = data;   
        console.log("You were succesfull in showing user info"); 
        //$scope.get_user(); //this will fetch latest record from DB
    })
}

/** function to delete a user from list referencing php **/
$scope.delete_user = function(index) {  
    $http.post('db.php?action=delete_user', 
        {
            'user_index' : index
        }
    )      
    .success(function (data, status, headers, config) {    
        $scope.get_user();//this will fetch latest record from DB
        console.log('Deletion was succesfull');
    })

    .error(function(data, status, headers, config) {
       console.log("You were NOT succesfull in deleting a user"); 
    });
}

$scope.showPopUp= function(ev) {
    $mdDialog.show({
      controller: DialogController,
      templateUrl: 'popup.tmpl.html',
      parent: angular.element(document.body),
      targetEvent: ev,
    })
};

function DialogController($scope, $mdDialog) {
    $scope.closeDialog = function() {
      $mdDialog.hide();
    }

    $scope.save_user = function() {
        $mdDialog.hide();
    }
}

});

я должен был прокомментировать следующий код в функции get_user ($ scope.get_user();), иначе я не смог бы выполнить форматирование удаления, но, с другой стороны, цикл не обновлялся. так что либо я комментирую $ scope.get_user() в функции get_user, а затем могу удалить пользователя или я не комментирую его, и цикл будет обновляться при добавлении нового пользователя, но тогда функция удаления не работает...

мой html-код:

<body ng-controller="AppCtrl">
  <div>
    <ul ng-init="get_user()">
      <li ng-repeat="user in userInfo ">{{user.user_name}}<a href="#" ng- 
      click="delete_user(user.id)"> --> Delete</a></li>
    </ul>
  </div>

 <md-button class="md-primary md-raised" ng-click="showPopUp($event)" flex 
 flex-md="100">Add a user</md-button>
</body>

и код для диалогового окна (popup.tmpl.html) следующий:

<md-dialog aria-label="Add or invite a user" ng-app="AddUser">
<form ng-controller="AppCtrl">
      <md-toolbar>
       <div class="md-toolbar-tools">
         <h2>Add or invite a user</h2>
         <span flex></span>
         <md-button class="md-icon-button" ng-click="closeDialog()">
              <md-icon md-svg-src="images/ic_close_24px.svg" aria-label="Close 
              dialog"></md-icon>
         </md-button>
       </div>
      </md-toolbar>
      <md-dialog-content>
        <div>
          <div layout="" layout-sm="column">
            <md-input-container flex="">
            <label>Enter a name</label>
            <input name="user_email" ng-model="user_name">
            </md-input-container>
        </div>
        <div layout="" layout-sm="column">
          <md-input-container flex="">
          <label>Enter an e-mail</label>
          <input name="user_name" ng-model="user_email">
          </md-input-container>
       </div>
      </div>
     </md-dial
     <div class="md-actions" layout="row">
       <md-button ng-click="closeDialog()" class="md-primary">Cancel</md-     
        button>
       <md-button ng-click="save_user()" name="add_user" class="md-
       primary">Add</md-button>
     </div>
    </form>
   </md-dialog>

GY22 29 июнь 2015, в 19:08

Источник

Теги:

php

mysql

javascript

jquery

angularjs

1 ответ

Ещё вопросы

Milos Mosovsky · Answer 1 · 2015-06-29T18-36-00.000Z

Проверьте мой фрагмент.

var app = angular.module('AddUser', ['ngMaterial']);

app.run(['$templateCache',
  function($templateCache) {
    $templateCache.put('popup.tmpl.html', '<md-dialog aria-label="Add or invite a user" ng-app="AddUser">' +
      '<form ng-controller="AppCtrl">' +
      '<md-toolbar>' +
      '<div class="md-toolbar-tools">' +
      '<h2>Add or invite a user</h2>' +
      '<span flex></span>' +
      '<md-button class="md-icon-button" ng-click="closeDialog()">' +
      '<md-icon md-svg-src="images/ic_close_24px.svg" aria-label="Close dialog"></md-icon>' +
      '</md-button>' +
      '</div>' +
      '</md-toolbar>' +
      '<md-dialog-content>' +
      '<div>' +
      '<div layout="" layout-sm="column">' +
      '<md-input-container flex="">' +
      '<label>Enter a name</label>' +
      '<input name="user_email" ng-model="user_name">' +
      '</md-input-container>' +
      '</div>' +

      '<div layout="" layout-sm="column">' +
      '<md-input-container flex="">' +
      '<label>Enter an e-mail</label>' +
      '<input name="user_name" ng-model="user_email">' +
      '</md-input-container>' +
      '</div>' +
      ' </div>' +
      '</md-dialog-content>' +
      '<div class="md-actions" layout="row">' +
      '<md-button ng-click="closeDialog()" class="md-primary">' +
      'Cancel' +
      '</md-button>' +
      '<md-button ng-click="save()" name="add_user" class="md-primary">' +
      'Add' +
      '</md-button>' +
      '</div>' +
      '</form>' +
      '</md-dialog>');


  }
]);

app.factory('UsersService', ['$q',
  function($q) {

    var service = {};
    service.data = [{
      user_name: 'Stack Overflow',
      id: 1
    }];

    service.get = function() {
      var deferred = $q.defer();

      deferred.resolve(service.data);
      return deferred.promise;
    }

    service.save = function(data) {
      var deferred = $q.defer();
      data.id = Math.floor((Math.random() * 999) + 111);
      service.data.push(data);
      deferred.resolve();
      return deferred.promise;
    }
    service.delete = function(user) {
      var deferred = $q.defer();
      alert('deleting user ' + user.id);
      var index = service.data.indexOf(user);
      service.data.splice(index, 1);
      deferred.resolve();
      return deferred.promise;

    }
    return service;
  }
]);

app.controller('AppCtrl', function($scope, $http, $mdDialog, UsersService) {
  $scope.userInfo = [];


  function getUsers() {
    UsersService.get().then(function(data) {
      _this.userInfo = data;
    });
  }
  getUsers();

  this.showPopUp = function(ev) {
    $mdDialog.show({
      controller: DialogController,
      templateUrl: 'popup.tmpl.html',
      parent: angular.element(document.body),
      targetEvent: ev,
    })
  };


  this.delete_user = function(user) {
    UsersService.delete(user).then(function() {
      getUsers();

    });
  };

  $scope.save = function() {
    var obj = {
      'user_name': $scope.user_name,
      'user_email': $scope.user_email
    };
    UsersService.save(obj).then(function() {
      getUsers();
      $mdDialog.hide();
    });
  }

  function DialogController($scope, $mdDialog) {
    $scope.closeDialog = function() {
      $mdDialog.hide();
    }

  }

  var _this = this;

});

<!DOCTYPE html>
<html lang="en" ng-app="AddUser">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Test 1 - Add user</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
  <link href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic" />
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body ng-controller="AppCtrl as _">
  <div>
    <ul>
      <li ng-repeat="user in _.userInfo ">{{user.user_name}} [{{user.id}}]<a href="#" ng-click="_.delete_user(user)"> --> Delete</a>
      </li>
    </ul>
  </div>
  <md-button class="md-primary md-raised" ng-click="_.showPopUp($event)" flex="" flex-md="100">
    Add a user
  </md-button>
  <!-- <button type="button" id="btnAddUser" class="btn btn-primary">Add User</button> -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
  <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
  <script src="js/app.js"></script>
</body>

Спасибо за вашу помощь. мне придется тщательно изучить ваш код. потому что ты пишешь это по-другому, тогда я, и я все еще очень плохо знаком со всей угловой концепцией. Знаешь ли ты случайно, что не так с моим кодом?
по моему опыту, обычно это происходит потому, что десинхронизация области видимости буквально ад, попробуйте выучить Controller как синтаксис (поиск в google), что является лучшим шаблоном дизайна в угловом формате. (На самом деле $ scope был удален в angular2 из-за этой проблемы, но вы очень скоро столкнулись с этой проблемой: P) Обновляя $ scope внутри обещаний, вызывающих проблемы с синхронизацией, мне пришлось переписать около 60 000 строк кода в старом проекте из-за $ scope старайтесь избегать $ scope, когда это возможно.
Хорошо, спасибо за совет. просто из любопытства код, который у меня есть сейчас, есть ли решение или обходной путь, по которому мне не нужно реализовывать новый синтаксис angular2? причина, по которой я спрашиваю об этом, состоит в том, что мой код имеет смысл для меня, ваш код немного сложен для меня ;-)
Я бы ответил на действие POST из бэкэнда с ID, созданной сущности, и обновил бы только $ scope.userInfo, и не вызывал бы backend, не сердитесь сейчас, но его глупый шаблон для вызова GET после каждого действия, когда вы вызываете DELETE, вы должны удалите элемент из области видимости, и это все, не вызывайте снова GET backend, потому что вам не нужно, даже на POST-действии, просто ответить полной сущностью (с ID) из backend и просто выдвинуть ее в область видимости, снова пропустив часть GET, вы нужна только часть GET, когда пользователь загружает экран (для загрузки начальных данных), все остальное - манипуляция областью.
мммм хорошо, я постараюсь внести необходимые изменения и, надеюсь, это сработает. так что если я понимаю ваше объяснение, тогда я должен внести изменения в мой php, а не в app.js? еще раз спасибо за помощь