私は、ホームページ上でページ上のすべての仲間(Gsonを使用しているjsonから)を表示しているアプリケーションがあります。ホームページにバディを追加するボタンがあります。 クリックすると、フォームフィールドでバディの詳細を入力する別のビューになります。 詳細を提出した後、もう一度ホームページに移動し、新しく追加されたバディを他のバディとレンダリングする必要があります。コントローラからのビューの切り替えがビューの更新を引き起こしていない
すべてが正常に機能しています。しかし、唯一の問題は、バディの詳細を提出した後にホームページに戻ったときです。ページには、新しく追加されたバディが反映されていません。しかし、範囲が更新されています。
ここで述べたように$ scope。$ apply()と$ scope。$ digest()を使用しようとしましたが、私のビューは更新されていません。私のホームページに同じコントローラを使用していて、私の範囲が同じになるようにバディを追加しています。
誰でも私がここで間違っていることを教えてもらえますか? これを実装する方法は他にありますか?
ここにコードがあります。
Home.html図
<div class="jumbotron">
<h1>Welcome to My Buddy List</h1>
<a class="btn btn-primary btn-lg" href="#/add_buddy">Add Buddy</a>
</div>
<h2>My Buddies</h2>
<ul class="media-list">
<li class="media col-md-6" ng-repeat="buddy in buddies|filter:search">
<a class="pull-left thumbnail" href="#/buddy/{{buddy.id}}">
<img class="media-object" width="100" ng-rc="img/{{buddy.image_name}}.jpg" alt="{{buddy.username}}">
</a>
<div class="media-body">
<h4 class="media-heading">{{buddy.username | uppercase}}
<span class="badge">{{buddy.status}}</span>
</h4>
<p>
<strong>First Name:</strong> {{buddy.first_name | capitalize}}<br/>
<strong>Last Name:</strong> {{buddy.last_name | capitalize}}<br/>
<strong>Status:</strong> {{buddy.status | capitalize}}<br/>
<strong>Type:</strong> {{buddy.type | capitalize}} Buddy
<a class="trashcan" data-ng-click="removeBuddy(buddy.id)" ><img class="trashcan" src="img/trashcan.png" alt="Delete"</a>
</p>
</div>
</li>
バディ・ビュー(add_buddy.html)
<div class="panel panel-default">
<div class="panel-heading">
<small><a href="#">Go Back</a></small>
<h3>Add Buddy</h3>
</div>
<div class="panel-body">
<form name="buddyForm" class="app-form">
<label>User name</label> : <input type="text" name="userName" ng-model="user.userName" required><br/>
<label>First name</label> : <input type="text" name="firstName" ng-model="user.firstName" required><br/>
<label>Last name</label> : <input type="text" name="lastName" ng-model="user.lastName" ><br/>
<label>Email</label> : <input type="email" name="email" ng-model="user.email" ><br/>
<!--label>Comments</label> : <textarea type="textarea" name="bio" ng-model="user.bio" ></textarea><br/-->
<button class="submitButton" data-ng-click="addThisBuddy(user)">Submit</button>
</form>
</div>
</div>
コントローラー・コードの追加:ルーティングを含む
$scope.addThisBuddy = function() {
$scope.newBuddy = [{
id: 100,
first_name: $scope.user.firstName,
last_name: "Anand",
birthday: "05/23/1998",
starred: "true",
username: $scope.user.userName,
image_name: "anand",
type: "Hometown",
bio: "Viswanathan Anand was born on 11 December.",
last_login: "05/23/2016",
email: "[email protected]"
}];
$scope.buddies = $scope.buddies.concat($scope.newBuddy);
$location.path('home'); //skipping to view the newly added buddy on homepage
$scope.$apply(); //tried but not updating view
$scope.$digest(); //tried but not updating view
};
マイapp.jsを
angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider.when('/home', {templateUrl: 'partials/home.html', controller: 'HomeController'});
$routeProvider.when('/buddy/:id', {templateUrl: 'partials/buddy.html', controller: 'BuddyController'});
$routeProvider.when('/type/:type', {templateUrl: 'partials/buddy_type.html', controller: 'BuddyTypeController'});
$routeProvider.when('/starred', {templateUrl: 'partials/starred_buddy.html', controller: 'StarredController'});
$routeProvider.when('/add_buddy', {templateUrl: 'partials/add_buddy.html', controller: 'HomeController'});
$routeProvider.otherwise({redirectTo: '/home'});
});
EDIT注:複数の検索を行った後
、私は$の場所を使用してビューを変更すると、コントローラを再ロードされることがわかりました。したがって、スコープは更新され、元の状態に戻ります。 これを回避する方法はありますか?
両方のビューで同じコントローラを使用しています。 My $ scope.addThisBuddy関数はHomeControllerにあります。 console.logを実行すると、更新されたBuddylistを表示できますが、ビューは更新されません。 – Taani
私はそれが$ location.pathだと思います。すべてのコントローラーをリセットします。 (http://stackoverflow.com/questions/14485117/angularjs-location-path-change-without-all-controllers-resetting)console.log _after_ $ location.pathコードを実行しようとしますか? –
$ location.pathの後にconsole.logを実行しました。新しい友達とスコープを更新しています。ビューは更新されませんでしたが。 – Taani