0
新しい角度になっています。アプリケーションをリロードせずにバインディングデータを変更するにはどうすればよいですか。ui-routerを使用して2つの状態に同じコントローラを使用するとデータが瞬時に変更されることはありません
//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'
})
}
私は、ユーザーがページのコンテンツを変更することができます「管理コンソール」とシンプルなウェブサイトを構築しようとしています。アプリは動作していますが、アプリを再ロードせずにコンテンツを更新していません...
'/ admin'ルートには、データベースを更新する関数を介してデータを変更するための入力があります。データベースがページがロードされているときに、ユーザーがログアウトすると変更が残りますが、データをバインドしているので、変更内容をリアルタイムで見ることができます。
//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.itouttitleもnavbarに含まれているので、私はいつもそれを見ることができ、すぐには変わらないと思う。これは、私が修正しているadminコントローラがNavにリンクされているコントローラと同じではないため、ここで大きな問題は、あるコントローラでデータを変更する方法と、同じコントローラの他のインスタンスでも変更することです。
//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']);
})();
ヘルプセンターで説明しているように、最小限の完全な例を試してください：http://stackoverflow.com/help/mcve – zoom