從控制器更改視圖不觸發視圖更新

Question

我有一個應用程序，在主頁上我顯示所有的夥伴（從使用GET的JSON）在頁面上。我有一個按鈕可以在主頁上添加好友。 點擊後，它會將我帶入不同的視圖，其中包含表單字段以輸入好友詳細信息。 提交詳細信息後，我再次被帶到應該向其他好友呈現新加入好友的主頁。

一切工作正常。但唯一的問題是在提交好友的詳細信息後返回主頁，頁面並未反映新添加的好友的視圖。但範圍正在更新。

我試過使用$ scope。$ apply（）和$ scope。$ digest（），這裏提到的是angular.js: model update doesn't trigger view update但它並沒有更新我的視圖。此外，我使用相同的控制器爲我的主頁和添加好友，以便我的範圍相同。

有人可以告訴我我在做什麼錯嗎？ 有沒有其他辦法可以實現？

我的代碼在這裏。

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: "tmoore@devshare.biz" 
    }]; 

    $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'}); 
}); 

編輯注：

做更多的搜索後，我發現，改變使用$位置的觀點是重裝控制器。因此，範圍得到更新並恢復到其以前的狀態。 有什麼辦法可以繞過嗎？

Answer 1

您的$scope.addThisBuddy功能在BuddyController？然後，當您參考$scope時，它將引用Add Buddy視圖的範圍，而不是Home視圖。