兩個國家與UI的路由器不能使數據變化瞬間

我新的角度，和我有搞清楚了這一點問題。如何在不重新加載應用程序的情況下更改綁定數據。兩個國家與UI的路由器不能使數據變化瞬間

//routes.js 

    function MainRouter ($stateProvider, $urlRouterProvider) { 
    $stateProvider 
    .state ('About', { 
     url: '/about', 
     templateUrl: 'js/about/about.html', 
     controller: 'adminController', 
     controllerAs: 'vm' 
    }) 
    .state ('Admin', { 
     url: '/admin', 
     templateUrl: 'js/admin/admin.html', 
     controller: 'adminController', 
     controllerAs: 'vm' 
    }) 
    }

我想用一個允許用戶更改頁面內容的「管理控制檯」構建一個簡單的網站。該應用程序是工作，但無需重新加載應用程序沒有更新內容...

的「/管理員」路由具有輸入通過更新database.I功能改變數據加載從內容當頁面加載數據庫，以便改變當用戶註銷留下來，但我也綁定數據，所以你可以看到實時的變化。

//admin.html 

    <div class='about-page-options> 
    <form name='changeAboutTitle' ng-submit='vm.changeContent()'> 
     <div class='about-page-options-title input-field'> 
     <input type='text' ng-model='vm.changeContentInput.aboutTitle'> 
     <label>title</label> 
     </div> 
     <div> 
     <button class='btn' type='submit'>Change</button> 
     </div> 
    </form> 
    </div>

控制器具有changeContent功能。

//adminController.js 
    function adminController($http, Upload, adminService){ 
    var vm=this 
    vm.loadContent=loadContent 
    vm.aboutTitle = '' 
    vm.changeContent = changeContent 
    vm.changeContentInput = {} 


//Load Content Page from database when loading the app 
    function loadContent() { 
     console.log('load content triggered') 
     $http({ 
     method:'GET', 
     url:'/api/content' 
     }).then(
     function(res){ 
      vm.aboutTitle = res.data[0].aboutTitle 
     } 
    ); 
    }; 
    loadContent() 

function changeContent() { 
    adminService.changeContent(vm.changeContentInput).then(function (res) { 
    vm.aboutTitle = res.data.aboutTitle 
    }) 
} 
} 
})();

在這種情況下，我想更改的內容是vm.aboutTitle。該應用程序改變它，我可以看到它，當我重新加載頁面。但由於vm.aboutTitle也包括在導航欄，我可以看到這一切的時候，我看到不立即改變，我想這是因爲管理員控制我修改是不一樣的，即與資產淨值的一個因此，這裏最大的問題是如何在一個控制器中更改數據，並在同一控制器的其他實例中更改。

//index.html 
<html ng-app='myapp'> 
     <head> 
     <meta charset='utf-8'> 
     <title>myapp</title>  
     </head> 

    <body> 
    <div class="navbar-fixed" ng-controller='adminController as vm'> 
     <nav> 
     <div class='nav-bar'> 
      <div class='brand-logo'> 
      <div id='logo'>MyLogo</div> 
      </div> 
      <ul> 
      <li><a ui-sref='home' id='home'>Home</a></li> 
      <li><a ui-sref='About'>{{vm.aboutTitle}}</a></li> 
      </ul> 
     </div> 
     </nav> 
    </div> 

    <div ui-view></div> 


</body> 
</html>

我也創建了一個服務，以防萬一它幫助我解決這個問題，但到目前爲止沒有運氣。任何建議？

//adminService.js 
function adminService ($http) { 
    var service={ 
     changeContent: changeContent 
    } 
    return service; 

    function changeContent (data) { 
     console.log(data) 
     var promise = $http({ 
     method: 'PUT', 
     url: 'api/content', 
     data: data, 
     }).then (
     function (res) { 
      return res; 
     } 
    ) 
     return promise 
    }; 
    }

而且

//app.js 
(function() { 
    angular.module('myapp', ['ui.router', 'ngResource']); 
})();

來源

2016-07-23 vanpeta

請儘量讓你的問題的一小部分，完整的例子如幫助中心解釋說：http://stackoverflow.com/help/mcve – zoom

使用相同的控制器將創建一個新的實例的每個路徑。一般來說，控制器的設計並不是爲了保持狀態。

如果您查找有關設計，Todd's one is good很好看。

來源

2016-07-23 23:42:36

兩個國家與UI的路由器不能使數據變化瞬間

回答

相關問題