为什么在 Angular 中使用 $location 和 angular-route 时，我的 $scope 没有在我的视图中更新？

Question

有人知道为什么我的 $scope.userData 在同时使用 angular-route 和 Angular 的 $location 服务时没有在我的视图中呈现吗？

我的情况：

在下面的代码示例中，我有一个遍历用户 allUsers 的索引页面，使用 angular 的 ng-repeat，如下所示：ng-repeat="user in allUsers [请注意，为简单起见，我在下面的控制器代码段中省略了提供 allUsers 但工作正常的功能]。

对于每个user，都有一个编辑按钮，应该运行 $scope.findOne 函数，将用户本身作为参数传递。

在我的 $scope.findOne 函数中，使用 $location 服务加载了一个新的部分，并更新了 $scope.userData 以反映此 user。我现在想在新部分（我的问题）上访问 $scope.userData。

问题：

新的部分加载，user 对象似乎可以正常传递，但是 $scope.userData 在前端变得不可访问。

伪代码（我想要的）：

// Iterate through allUsers (`user in allUsers`)
// When Edit button is clicked for `user`:
    // Fire off `findOne` function passing in `user`
    // Set `$scope.userData` to `user`
    // Load `html/edit.html` partial
    // Show `$scope.userData` on the page (should be `user` info):

伪代码（实际上发生了什么）：

// Iterates through allUsers (`user in allUsers`)
// When Edit button is clicked:
    // Fires off `findOne` function and passes `user`
    // Sets $scope.userData` (console logging it after shows changes)
    // Loads `html/edit.html`
    // **DOES NOT show `$scope.userData` and appears empty.**

Angular 模块设置：

/index.html 页面和 /edit.html 页面似乎都使用适当的控制器分配正确设置：

// Define Module:
var app = angular.module('app', ['ngRoute']);

// Define Routes:
app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'html/index.html', // root route partial
            controller: 'userController',
        })
        .when('/edit/:id', {
            templateUrl: 'html/edit.html', // edit page partial
            controller: 'userController',
        })
        .otherwise({
            redirectTo: '/',
        })
});

Angular 控制器：

我的 angular 控制器（现在显示 allUsers 功能）显示了我尝试访问的 findOne 功能，以及 $location 服务的使用：

app.controller('userController', ['$scope', 'userFactory', '$location', function($scope, userFactory, $location) {

    $scope.findOne = function(myUser) {
        $scope.userData = myUser;
        console.log($scope.userData); // shows changes...(?)
        $location.url('/edit/' + myUser._id); // redirects and partial loads OK...
    };

}]);

在下面的索引 HTML 示例中，单击“编辑”按钮会触发 $scope.findOne 功能正常，重定向页面并更新 $scope.userData（控制台日志正常），但在部分本身，$scope.userData 似乎并没有反映出这些变化（给出了什么？）：

索引页 HTML:

<div ng-repeat="user in allUsers">
    <h1>{{user.username}}</h1>
    <button ng-click="findOne(user)">Edit</button> <!-- runs findOne -->
</div>

编辑部分内容HTML:

<h2>Edit:</h2>
{{userData}}  <!-- $scope.userData displays nothing? -->

总结：

为什么我的 Edit Partial HTML 中的 {{userData}} 没有显示任何内容？

我通过创建一个新控制器找到了满足我需求的解决方案，并在加载 /edit.html 页面时让另一个控制器接管。控制器根据 req.params.id 为用户查询页面加载时的数据库。这行得通，我能够继续，但我有两个独立的控制器，相反，我想从一个控制器为我的 Users 管理所有 CRUD 操作......（这是不好的做法吗？）

我最初尝试过上述解决方案，但遇到了本文中概述的 $scope 问题。有什么想法让我的上述数据在我的视图中呈现时我做错了什么吗？您的阅读时间和耐心非常宝贵！谢谢 Stack 社区！

Answer 1

我的猜测（主要是 b/c 我使用 angular-ui-router）是当您导航到编辑部分时，正在实例化一个新的控制器，因此 $scope 上的数据是迷路了。

以下是我见过的两种常见方法：

执行上述操作，使用路由参数向服务器查询用户数据。考虑为 $http 启用缓存选项，这样它就不必每次都访问服务器...但是您需要在数据更改时使缓存无效
创建一个查询服务器以获取用户列表的服务。此服务使用户列表可供控制器使用，并且 returns 个人用户可以进行编辑。

为什么在 Angular 中使用 $location 和 angular-route 时，我的 $scope 没有在我的视图中更新？

Why is my $scope not updating in my View in Angular when using $location with angular-route?

angularjs

angularjs-scope

mean-stack

partials