Angularjs- Загрузить и обновить данные на странице одним нажатием кнопки

Question

Я новичок в этой технологии и задаю общую проблему, с которой сталкиваются многие. Я обновляю дату в базе данных и отображаю сообщение типа «Опубликовано успешно» нажатием кнопки, но я хочу, чтобы дата также обновлялась на экране. Я попробовал добавить Refresh code, но затем опубликованное сообщение не отображается, но страница обновляется и отображается обновленная дата. Я не могу выполнить оба действия одним щелчком кнопки. Короче говоря, я хочу обновить страницу автоматически при нажатии кнопки и отображать обновленные данные с сообщением.

HTML КОД:

<div class="row" ng-controller="PublishManifestCtrl"> 
<div class="col-xs-12 col-md-12"> 
    <div class="widget"> 
     <div class="widget-header bordered-bottom bordered-themeprimary"> 
      <i class="widget-icon fa fa-tasks themeprimary"></i> 
      <span class="widget-caption themeprimary">Manifest Status</span> 
     </div> 
     <div class="widget-body"> 
      <form class="form-bordered" role="form"> 
       <div class="form-group"> 
        <label style="padding-left: 8px;">Manifest was last published to agents on <b>{{manifeststatus.manifestLastPublishedDate}}</b>.</label> 
       </div> 
       <div class="form-group"> 
        <label style="padding-left: 8px;">Manifest was last updated by <b> {{manifeststatus.lastUpdatedByUser}} </b> on <b>{{manifeststatus.manifestLastedUpdatedDate}}</b>.</label> 
       </div> 
       <div class="form-group"> 
        <div class="col-sm-offset-1"> 
         <button id="PublishButton" class="btn btn-default shiny " ng-disabled="manifeststatus.enablePublishButton" ng-click="Save()">Publish</button> 
        </div> 
        <br/> 
        <div id="statusDivPublish" ng-show="showstatus"> 
         <alert type="{{alert.type}}">{{alert.msg}}</alert> 
        </div> 
       </div> 
      </form> 
     </div> 

JS код:

app.controller('PublishManifestCtrl', function ($scope, $rootScope, $http) { 

$scope.showstatus = false; 

$http({ 
    url: $rootScope.WebApiURL + '/getmanifeststatus', 
    method:get(), 
    params: { 'foobar': new Date().getTime() } 
}). 
success(function (data, status, headers, config) { 
    var options = { year: "numeric", month: "long", day: "numeric", hour: "numeric", minute: "numeric" }; 

    data.manifestLastedUpdatedDate = (new Date(data.lastUpdatedDateTime)).toLocaleDateString('en-US', options); 
    data.manifestLastPublishedDate = (new Date(data.lastPublishDateTime)).toLocaleDateString('en-US', options); 
    var date1 = new Date(data.lastUpdatedDateTime); 
    var date2 = new Date(data.lastPublishDateTime); 
    data.enablePublishButton = date2.getTime() > date1.getTime(); 

    $scope.manifeststatus = data; 
}). 
error(function (data, status, headers, config) { 
    alert('error' + status); 
    // log error 
}); 
$scope.Save = function (data) { 
    debugger; 
    $http.post($rootScope.WebApiURL + '/updatemanifeststatus'); 

    $scope.showstatus = true; 
    $scope.alert = { type: 'success', msg: 'Published Successfully.' }; 
    $(".statusDivPublish").show(); 
    $(".statusDivPublish").remove(); 

)}); 

Для освежения я попытался с помощью кода, как показано ниже, после

$scope.Save = function (data) { 
    debugger; 
    $http.post($rootScope.WebApiURL + '/updatemanifeststatus'); 


//refresh 
    $state.transitionTo($state.current, $stateParams, { 
     reload: true, 
     inherit: false, 
     notify: true 
    }); 

, а затем другие вещи , Но я не уверен, где я ошибаюсь.

Answer 1

Во-первых, вы должны использовать ngClick для выполнения одного или нескольких действий в одном и том же событии кликов. Пример:

<button ng-click="function();otherFunction()"> 

Затем ваш элемент отображения данных может оставаться актуальной, используя ngModel, обновляется ваш вызов Ajax. Пример:

Markup:

<p>{{ yourDate }}</p> 

JS:

//.... Begin of your Ajax function 

$scope.yourDate = data.yourNewDate; 

//.... 

Ваше содержание элемента будет обновить без обновления браузера.