javascript - 由于实现 $mdDialog( Material 设计)，Angular 没有更新循环

标签 javascript php jquery mysql angularjs

基于我之前的帖子:Angular loop is not updating ，我稍微更新了代码，向用户按钮添加了一个对话框。

我的 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();) 中注释掉以下代码，否则我无法执行删除，但另一方面循环不会更新。因此，要么我在 get_user 函数中注释掉 $scope.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>

最佳答案

检查我的代码片段。

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>

关于javascript - 由于实现 $mdDialog( Material 设计)，Angular 没有更新循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31121071/

上一篇：PHP实时动态计算mysql结果之和

下一篇：php - 创建基于二维合并数组的值

相关文章：

javascript if 语句不起作用

jquery - 拖动任何东西时使用 jquery ui 创建放大的 'photographers loope' 样式效果

javascript - 通过浏览器的 "BACK"函数加载页面时触发 onload 脚本(js 或 jQuery)

javascript - Jquery 如果复选框被选中 Bootstrap 开关

javascript - 在 JavaScript 中替换字符串中的一系列字符的最佳方法是什么

php - 在引导模式框中加载远程数据之前添加等待消息

php - 在 Symfony 2 中是否有一种简单的方法来替换引用中的 url 参数？

javascript - 组合 asp.net 和 javascript

java - 滚动在 Internet Explorer 中不起作用

PHP 骗子。如何创建N个独特的词？

©2024 IT工具网  联系我们