javascript - 从 Controller 更改 View 不会触发 View 更新

Question

我有一个应用程序，在主页上显示页面上的所有好友(使用 GET 来自 json)。我在主页上有一个添加好友的按钮。单击后，我会进入另一个 View ，其中包含用于输入好友详细信息的表单字段。提交详细信息后，我再次进入主页，该主页应该将新添加的好友与其他好友一起呈现。

一切正常。但唯一的问题是在提交好友详细信息后返回主页时，页面没有将新添加的好友反射(reflect)到 View 中。然而范围正在更新。

我尝试过使用 $scope.$apply() 和 $scope.$digest() ，如此处所述 angular.js: model update doesn't trigger view update但这并没有更新我的观点。另外，我在主页上使用相同的 Controller 并添加好友，以便我的范围相同。

有人能告诉我我在这里做错了什么吗？还有其他方法可以实现相同的功能吗？

我的代码放在这里。

Home.html View

<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>

添加好友 View (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>

Controller 代码:

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

编辑注释:

经过更多搜索，我发现使用 $location 更改 View 正在重新加载 Controller 。因此，作用域会更新并恢复到之前的状态。有什么办法可以绕过它吗？

Answer 1

你的$scope.addThisBuddy函数在BuddyController中吗？然后，当您引用 $scope 时，它引用的是“添加好友” View 的范围，而不是“主页” View 。