Question

我正在尝试学习AngularJS，而我正在制作测试应用。我有一个表，通过$ http.get（）来填充从WebService（发布者列表）返回的数据。

当用户点击一行（发布者）时，我想用所选发布者的员工列表填充第二个表。通过使用F12工具（网络+控制台），我看到数据已返回，但第二个表未填充/更新。

HTML

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <script src=""></script>
    <script src="js/angular.js"></script>
    <script src="js/scripts.js"></script>
    <script src="js/app.js"></script>
    <title>My SPA</title>
</head>
<body>

    <header>
        <h1 id="page-title">Header</h1>
        <nav>
            <ul>
                <a href="#"> <li>Menu 1</li> </a>
                <a href="#"> <li>Menu 2</li> </a>
                <a href="#"> <li>Menu 3</li> </a>
                <a href="#"> <li>Menu 4</li> </a>
            </ul>
        </nav>
    </header>

    <div ng-controller='PublishersController' class="table-wrapper">
        <table class="data-table" />
        <thead>
            <tr>
                <th ng-repeat="(key,val) in publishers[0]">{{key}}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat='pub in publishers' ng-click='getPublishersEmployees(pub.pub_id)'>
                <td ng-repeat='(key,val) in pub'>{{val}}</td>
            </tr>
        </tbody>
        </table>
    </div>

    <div ng-controller='PublishersController' class="table-wrapper">
        <table class="data-table" />
        <thead>
            <tr>
                <th ng-repeat="(key,val) in employees[0]">{{key}}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat='employee in employees'>
                <td ng-repeat='(key,val) in employee'>{{val}}</td>
            </tr>
        </tbody>
        </table>
    </div>

</body>
</html>

JS

var urlBase = "http://localhost:2041";

var app = angular.module('myApp', []);

app.factory('myFactory', ['$http', function ($http) {

    var webAPI = '/api/query';
    var webService = urlBase + webAPI;
    var myFactory = {};

    myFactory.getCategories = function () {
        return $http.get(webService + '/getCategories');
    };
    myFactory.getCategorySalesByMonth = function (id) {
        return $http.get(webService + '/getCategorySalesByMonth/' + id);
    };

    myFactory.getPublishers = function () {
        return $http.get(webService + '/getPublishers');
    };
    myFactory.getPublishersEmployees = function (id) {
        return $http.get(webService + '/getPublishersEmployees/' + id);
    };

    return myFactory;
}]);

app.controller('PublishersController', ['$scope', 'myFactory', 
    function ($scope, myFactory) {

    $scope.status;
    $scope.publishers;
    $scope.employees;

    getPublishers();

    function getPublishers() {
        myFactory.getPublishers()
            .success(function (publishers) {
                $scope.publishers = publishers;
            })
            .error(function (error) {
                $scope.status = 'Unable to load publishers data: ' + error.message;
            });
    }

    $scope.getPublishersEmployees = function (id) {
        myFactory.getPublishersEmployees(id)
            .success(function (employees) {
                $scope.employees = employees;
        console.log($scope.employees);
            })
            .error(function (error) {
                $scope.status = 'Error retrieving employees! ' + error.message;
            });
    };
}]);

我做错了什么？

Answer 1

问题是您为PublishersController和EmployeesController使用单独的控制器。 Angular将为您的控制器创建单独的范围。因此，当您在$scope.employees = employees中分配PublishersController时，不会反映对EmployeesController

创建的范围

尝试：

<div ng-controller='PublishersController' class="table-wrapper">
        <table class="data-table" />
        <thead>
            <tr>
                <th ng-repeat="(key,val) in publishers[0]">{{key}}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat='pub in publishers' ng-click='getPublishersEmployees(pub.pub_id)'>
                <td ng-repeat='(key,val) in pub'>{{val}}</td>
            </tr>
        </tbody>
        </table>

        <table class="data-table" />
        <thead>
            <tr>
                <th ng-repeat="(key,val) in employees[0]">{{key}}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat='employee in employees'>
                <td ng-repeat='(key,val) in employee'>{{val}}</td>
            </tr>
        </tbody>
        </table>
  </div>

上面的解决方案只是指出你的问题。我不了解您的应用程序设计，您可能不会遵循此解决方案，而是重新构建您的代码以最适合您的应用程序设计（例如将员工存储在共享服务中，......）。

我在此提出另一种解决方案，但我不确定它是否适合您的应用程序。您只需将原始HTML代码与PublishersController和EmployeesController一起使用即可。在您的PublishersController中，您可以从rootScope广播一个事件：

.success(function (employees) {
             $rootScope.$broadcast("employeeLoaded",employees);
       })

别忘了将$ rootScope注入PublishersController：

app.controller('PublishersController', ['$scope', 'myFactory','$rootScope', 
    function ($scope, myFactory,$rootScope)

在EmployeesController中，您可以订阅此活动：

$scope.$on("employeeLoaded",function (event,employees){
     $scope.employees = employees;
});

有关角度事件的更多信息，请查看Working with $scope.$emit and $scope.$on

AngularJS - HTML不更新变量

1 个答案: