带有Angular + Ionic的CRUD - 递归，无法初始化数据？答案

【问题标题】：CRUD with Angular + Ionic - Recursion, can't initialize data?带有Angular + Ionic的CRUD - 递归，无法初始化数据？
【发布时间】：2017-10-04 00:10:39
【问题描述】：

我已经为此烦恼了一段时间，我可以使用你能提供的任何帮助！

我正在尝试使用 Angular 制作一个 Ionic 框架 CRUD 应用程序（通过 PHP 连接到 MySQL，这是值得的）但我遇到了一个问题 - 我无法让我的列表来播种数据。

我的应用程序有一个索引页面和一些根据需要进出的模板。默认的是一个项目列表，这就是我要麻烦的地方。我有一个名为 membersController 的控制器，它在列表的 ion-view 中设置，并且我尝试通过将 ng-init="getRecords()" 也放入 ion-view 标签中来初始化对服务器的调用，使用 getRecords( ) 是控制器中的 $scrope，它调用服务器以获取数据。但它永远不会被调用，控制台会警告我

“警告：尝试多次加载 Angular。”

我搜索了这个，它看起来可能是很多东西，但我认为它通常与递归调用有关，因为路由问题？我试图自己诊断它，但老实说，当谈到 Angular 时，我的态度还很糟糕——我可能遗漏了一些基本的东西！

我的 index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/toastr.css" rel="stylesheet"/>

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <script src="js/directives.js"></script>
    <script src="js/app.js"></script>
    <script src="js/toastr.js"></script>

<script src="js/jqueryScript.js"></script>
  </head>
  <body ng-app="snsApp">
    <ion-side-menus>
      <ion-side-menu-content>
        <ion-nav-bar class="bar-positive">
          <ion-nav-buttons side="left">
            <button menu-toggle="left" class="button button-icon button-clear ion-navicon"></button>
          </ion-nav-buttons>
          <ion-nav-back-button></ion-nav-back-button>
        </ion-nav-bar>

        <ion-nav-view></ion-nav-view>
      </ion-side-menu-content>
      <ion-side-menu side="left">
        <ion-header-bar class="bar-positive">
          <h1 class="title">SNS Menu</h1>
        </ion-header-bar>
        <ion-content>
          <ion-list>
            <ion-item menu-close href="#/list">Members' List</ion-item>
            <ion-item menu-close href="#/add">Add New Member</ion-item>
            <ion-item menu-close href="#/visual">Send Notification</ion-item>
          </ion-list>
        </ion-content>
      </ion-side-menu>
    </ion-side-menus>
  </body>
</html>

我的 app.js：

(function(){
// define application
app = angular.module("snsApp", ['ionic', 'components']);


app.config(function($stateProvider, $urlRouterProvider){

    $stateProvider.state('list', {
      url: '/list',
      templateUrl: 'templates/list.html'
    });

    $stateProvider.state('add', {
      url: '/add',
      templateUrl: 'templates/add.html',
      controller: 'memberController'
    });

    $stateProvider.state('edit', {
      url: '/edit/:userId',
      templateUrl: 'templates/edit.html',
      controller: 'memberController'
    });

    $stateProvider.state('visual', {
      url: '/visual',
      templateUrl: 'templates/visual.html',
      controller: 'memberController'
    });

    $urlRouterProvider.otherwise('/list');
});


app.controller("memberController", function($scope,$http){
    $scope.users = [];
    $scope.tempUserData = {};
    // function to get records from the database
    $scope.getRecords = function(){
        $http.get('http://localhost:8080/sns/action.php', {
            params:{
                'type':'view'
            }
        }).success(function(response){
            if(response.status == 'OK'){
                $scope.users = response.records;
            }
        });
    };



   // function to insert or update user data to the database
    $scope.saveUser = function(type){
        var data = $.param({
            'data':$scope.tempUserData,
            'type':type
        });
        var config = {
            headers : {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
            }
        };
        $http.post("http://localhost:8080/sns/action.php", data, config).success(function(response){
            if(response.status == 'OK'){
                if(type == 'edit'){
                    $scope.users[$scope.index].id = $scope.tempUserData.id;
                    $scope.users[$scope.index].name = $scope.tempUserData.name;
                    $scope.users[$scope.index].email = $scope.tempUserData.email;
                    $scope.users[$scope.index].phone = $scope.tempUserData.phone;
                    $scope.users[$scope.index].created = $scope.tempUserData.created;
                    $scope.users[$scope.index].group = $scope.tempUserData.group;
                }else{
                    $scope.users.push({
                        id:response.data.id,
                        name:response.data.name,
                        email:response.data.email,
                        phone:response.data.phone,
                        created:response.data.created,
                        group:response.data.group
                    });
                }

              //  $scope.userForm.$setPristine();
                $scope.tempUserData = {};
               // $('.formData').slideUp();
               // $scope.messageSuccess(response.msg);
            }else{
            //    $scope.messageError(response.msg);
            }
        });
    };

    // function to add user data
    $scope.addUser = function(){
        $scope.saveUser('add');
    };

    // function to edit user data
    $scope.editUser = function(user){
        $scope.tempUserData = {
            id:user.id,
            name:user.name,
            email:user.email,
            phone:user.phone,
            group:user.group,
            created:user.created
        };
        $scope.index = $scope.users.indexOf(user);
    };

    // function to update user data
    $scope.updateUser = function(){
        $scope.saveUser('edit');
    };

    // function to delete user data from the database
    $scope.deleteUser = function(user){
        var conf = confirm('Are you sure you want to delete this member?');
        if(conf === true){
            var data = $.param({
                'id': user.id,
                'type':'delete'    
            });
            var config = {
                headers : {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                }    
            };
            $http.post("http://localhost:8080/sns/action.php",data,config).success(function(response){
                if(response.status == 'OK'){
                    var index = $scope.users.indexOf(user);
                    $scope.users.splice(index,1);
                    $scope.messageSuccess(response.msg);
                }else{
                    $scope.messageError(response.msg);
                }
            });
        }
    };

    //function to remove user from list, then delete from the cloud database
    $scope.remove = function(userId){
        for(var i=0; i<users.length; i++){
          if(users[i].id == userId){
            users.splice(i, 1);
            $scope.deleteUser(users[i]);
            return;
          }
    };
  };
});


app.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      if(window.cordova && window.cordova.plugins.Keyboard) {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

        // Don't remove this line unless you know what you are doing. It stops the viewport
        // from snapping when text inputs are focused. Ionic handles this internally for
        // a much nicer keyboard experience.
        cordova.plugins.Keyboard.disableScroll(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  });
}());

我的列表.html：

init="getRecords()">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-icon-right" ng-repeat="user in users track by user.id">
        <i class="icon icon-left ion-{{user.email}}"></i>
        <h2 class="ion-{{user.email}}"> {{user.name}}</h2>
        <p> {{user.group}}</p>

        <a href="#/edit/{{user.id}}" class="button button-light icon ion-edit"></a>

        <ion-option-button class="button-assertive icon-left ion-trash-b" ng-click="deleteUser(user.id)">Delete</ion-option-button>
      </ion-item>
    </ion-list>
    <br><br><br>
  </ion-content>
  <div class="bar bar-footer bar-stable">
      <div class="row">
          <a href="#/visual" class="col button button-balanced ion-android-add-circle left"> Send Notification</a> &nbsp;
        <a href="#/add" class="col button button-positive ion-person-add"> Add User</a>
    </div>
  </div>
</ion-view>

【问题讨论】：

状态控制器list在哪里？
如果templates/list.html 存在，还要检查网络或控制台选项卡
我曾经有一个专用的列表控制器，但是当我遇到这个问题时，我试图将它全部放入一个控制器中，看看我是否可以让它以这种方式工作 - 声明了列表的控制器list.html ion-view 标记，我将其替换为 memberController - 有问题吗？我已将其添加到配置中并将其从离子视图中删除，但我仍然收到有关 Angular 尝试加载两次的相同消息。编辑：list.html 在网络选项卡中 - 我加载应用程序时得到的是列表页面，但没有加载任何记录。
getRecords 是memberController 的方法。所以你的 list.html 必须使用这个控制器

标签： javascript php html angularjs ionic-framework

【解决方案1】：

以防万一这对将来的任何人有所帮助 - 问题是 ionic 的捆绑包引入了 Angular，但我仍然在索引页面的脚本中单独添加它。

【讨论】：