2015-08-26 30 views
1

我想在顯示消息或警報顯示「成功」或反之後刷新頁面。我怎樣才能實現它?單擊即可顯示消息和刷新頁面在Angular JS中

我嘗試刷新代碼,但它之後不顯示消息。

HTML CODE: 

<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(manifeststatus)">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'); 
    //refresh 
    $state.transitionTo($state.current, $stateParams, { 
    reload: true, 
    inherit: false, 
    notify: true 
    }); 
    $scope.showstatus = true; 
    $scope.alert = { type: 'success', msg: 'Published Successfully.' }; 
    $(".statusDivPublish").show(); 
)}); 

實施

$scope.Save = function (data) { 
     // debugger; 
     $http.post($rootScope.WebApiURL + '/updatemanifeststatus'); 
     //made change 
     $scope.manifeststatus = data; 
     $scope.showstatus = true; 
     $scope.alert = { type: 'success', msg: 'Published Successfully.' }; 
     $(".statusDivPublish").show(); 


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

    } 
    }); 

enter image description here

本來應該是這樣: enter image description here

+0

但是,爲什麼要重新加載.angular如果u想改變服務的響應後,任何然後只需在雙向綁定工作,頁面更改$範圍 – maddygoround

+0

@ maddygoround,因爲在該按鈕上單擊我將當前系統日期/時間上載到數據庫並希望將其取回到屏幕上。 –

+0

將日期時間賦值給任何作用域var ..when當您分配一個值時,它將自動反映爲html – maddygoround

回答

2

在HTML

<div>{{date}}</div> 
我們angularjs

文件

$scope.Save = function (data) { 

$http.post($rootScope.WebApiURL + '/updatemanifeststatus'); 

$scope.date = data.date; 

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

)}); 
相關問題