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

编辑笔记：

在做了更多搜索之后，我发现使用$ location更改视图正在重新加载控制器。因此，范围会更新并恢复到以前的状态。有没有办法绕过它？

Answer 1

$scope.addThisBuddy中的BuddyController功能是？然后，当您引用$scope时，它引用了Add Buddy视图的范围，而不是Home视图。

从控制器更改视图不会触发视图更新

1 个答案: