2016-10-07 4 views
0

У меня возникла проблема с добавлением метода обновления загруженных данных с помощью кнопки. Мой контроллер:Кнопка AngularJS Reload?

.controller('mainCtrl', function($scope, $http, User) { 
     $scope.loading = true; 

     User.get() 
      .success(function(data) { 
       $scope.users = data; 
       $scope.loading = false; 
      }); 
    }); 

Услуги:

angular.module('userService', []) 

    .factory('User', function($http) { 

     return { 
      get : function() { 
       return $http.get('/api/users/get'); 
      } 
     } 

    }); 

И это, как мой взгляд выглядит следующим образом:

<div class="box" ng-app="userApp" ng-controller="mainCtrl"> 
       <div class="box-header"> 
        Angular Test <button class="btn btn-success" ng-click="get()"><i class="fa fa-refresh"></i> Reload</button> 
       </div> 
       <div class="box-body"> 
        <p class="text-center" ng-show="loading"><span class="fa fa-meh-o fa-5x fa-spin"></span></p> 
        <table ng-hide="loading" class="table table-responsive"> 
         <thead> 
          <tr> 
           <th>ID</th> 
           <th>Username</th> 
           <th>Realname</th> 
           <th>Email</th> 
           <th>Phone</th> 
           <th></th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr ng-repeat="user in users"> 
           <td>@{{ user.id }}</td> 
           <td>@{{ user.name }}</td> 
           <td>@{{ user.realname }}</td> 
           <td>@{{ user.email }}</td> 
           <td>@{{ user.phone }}</td> 
           <td> 
            <a href="/admin/profile/@{{ user.id }}" class="btn btn-block btn-primary btn-sm"> 
             <i class="fa fa-user" aria-hidden="true"></i> Profile 
            </a> 
           </td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
      </div> 

Как вы можете видеть, я попытался есть кнопка перезагрузки, которая использует ng-click="get". Однако это ничего не делает. Что мне нужно там позвонить?

+0

Можете ли вы попробовать с ng-if вместо ng-hide/ng-show и заменить $ scope.loading = true на false и $ scope.loading = false на true? Получаете ли вы все данные в своем контроллере? Вы проверили с помощью console.log? – Wandrille

+0

Загрузка данных работает. Только кнопка не запускает перезагрузку. – Scarwolf

+0

Извините, я не видел. Где определена ваша функция? Это может быть определено в вашем контроллере. – Wandrille

ответ

3

Вам необходимо создать новую функцию в контроллере, чтобы получить пользовательские данные и назначить их области, таким образом вы можете вызвать ее из шаблона по своему усмотрению.

.controller('mainCtrl', function($scope, $http, User) { 


    function get() { 
     $scope.loading = true; 
     User.get() 
      .success(function(data) { 
       $scope.users = data; 
       $scope.loading = false; 
      }); 
    } 

    // Assign the get function to the scope 
    $scope.get = get; 

    // Call the get function when the controller is created 
    get(); 
}); 
+0

Awesome, это работает, как и ожидалось. Большое спасибо. – Scarwolf

+0

'$ scope.user' не работает. взял это из учебника. Я предполагаю, что пользователь ** s ** из-за цикла в представлении ?: '' – Scarwolf

+0

Извините, я не обратил внимания на то, что ng-repeat – nagyf

Смежные вопросы