两个国家与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的路由器不能使数据变化瞬间

回答

相关问题