工厂未向控制器提供正确的值

Question

在我的 Angular js 项目中，工厂没有根据需要向控制器提供值。我总是看到空结果。当我使用 console.log() 登录浏览器时，我在控制台中看到的是： [对象对象]，[对象对象]，[对象对象]。我被困在这一点上。尝试了很多东西，但没有任何效果。

这是我的控制器代码：

var controllers = {};

controllers.ProductController = function ($scope, $route, $routeParams, $location, ProductFactory) {
    $scope.products = [];
    var init = function () {
        $scope.products = ProductFactory.getProducts();
        console.log('got products in controller');
        console.log($scope.products)
    };
    var initProductEdit = function () {
        var code = $routeParams.code;
        if (code = undefined) {
            $scope.currentProduct = {};
        }
        else
        {
            $scope.currentProduct = ProductFactory.loadProductByCode(code);
        }
    };
    $scope.$on('$viewContentLoaded', function () {
        var templateUrl = $route.current.templateUrl;
        if (templateUrl == '/Partials/ProductEdit.html') {
            initProductEdit();
        }
        else if (templateUrl == '/Partials/ProductList.html')
        {
            var code = $routeParams.code;
            if(code!=undefined)
            {
                $scope.deleteProduct(code);
            }
        }
    });
    init();
    $scope.saveProduct = function () {
        ProductFactory.saveProduct($scope.currentProduct);
        $location.search('code', null);
        $location.path('/');
    };
    $scope.deleteProduct = function (code) {
        ProductFactory.deleteProduct(code);
        $location.search('code', null);
        $location.path('/');
    };
};

angSPA.controller(controllers);

这是我的工厂代码：

angSPA.factory('ProductFactory', function () {
    var products = [
        { code: 1, name: 'Game of Thrones', description: 'Series' }
        { code: 2, name: 'DmC', description: 'Game' },
        { code: 3, name: 'Matrix', description: 'Movie' },
        { code: 4, name: 'Linkin Park', description: 'Music Band' }];

    var factory = {};
    console.log('initializing factory');
    factory.getProducts = function () {
        console.log('factory now providing products');
        return products;
    };

    factory.loadProductByCode = function (code) {
        var product;
        for (var i = 0; i < products.length; i++) {
            if (products[i].code == code) {
                product = products[i];
                return product;
            }
        }
    };

    factory.saveProduct = function (product) {
        products.push(product);
        console.log('factory saved product');
    };

    factory.deleteProduct = function (code) {
        var product = factory.loadProductByCode(code);
        if (product != null) {
            products.remove(product);
            console.log('factory deleted product');
        }
    };
    console.log('returning factory');
    return factory;
});

这是我的看法：

<div class="container">
    <h2 class="page-title">Product Listing</h2>
    <div class="searchbar">
        <ul class="entity-tabular-fields">
            <li>
                <label>Search: </label>
                <span class="field-control">
                    <input type="text" data-ng-model="filter.productName" />
                </span>
                <label></label>
            </li>
        </ul>
    </div>
    <h2><a href="#/ProductEdit">Add New Product</a></h2>
    <table class="items-listing">
        <thead>
            <tr>
                <th>Code</th>
                <th>Name</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-ng-repeat="product in products|filter:filter.productName"></td>
                <td><a href="#/ProductEdit?code={{product.code}}">{{product.code}}</a></td>
                <td>{{product.name}}</td>
                <td>{{product.description}}</td>
                <td><a href="#/?code={{product.code}}">Delete</a></td>
            </tr>
        </tbody>
    </table>
</div>

我的路由功能：

angSPA.config(function ($routeProvider) {
    $routeProvider
    .when(
    '/',
    {
        controller: 'ProductController',
        templateUrl: 'Partials/ProductList.html'
    })
    .when(
    '/ProductEdit',
    {
        controller: 'ProductController',
        templateUrl: 'Partials/ProductEdit.html'
    })
    .otherwise({
        redirectTo: '/'
    });
    console.log('routing done');
});

Answer 1

给定的改变你的 htmt

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

angSPA.controller("ProductController", function($scope, ProductFactory) {
    $scope.products = [];
    var init = function() {
        $scope.products = ProductFactory.getProducts();
        console.log('got products in controller');
        console.log($scope.products + "")
    };
    init();
   
});


angSPA.factory('ProductFactory', function() {
    var products = [
        {code: 1, name: 'Game of Thrones', description: 'Series'},
        {code: 2, name: 'DmC', description: 'Game'},
        {code: 3, name: 'Matrix', description: 'Movie'},
        {code: 4, name: 'Linkin Park', description: 'Music Band'}];

    var factory = {};
    console.log('initializing factory');
    factory.getProducts = function() {
        console.log('factory now providing products');
        return products;
    };

    factory.loadProductByCode = function(code) {
        var product;
        for (var i = 0; i < products.length; i++) {
            if (products[i].code == code) {
                product = products[i];
                return product;
            }
        }
    };

    factory.saveProduct = function(product) {
        products.push(product);
        console.log('factory saved product');
    };

    factory.deleteProduct = function(code) {
        var product = factory.loadProductByCode(code);
        if (product != null) {
            products.remove(product);
            console.log('factory deleted product');
        }
    };
    console.log('returning factory');
    return factory;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

<body  ng-app="angSPA" ng-controller="ProductController">
        <div class="container">
            <h2 class="page-title">Product Listing</h2>
            <div class="searchbar">
                <ul class="entity-tabular-fields">
                    <li>
                        <label>Search: </label>
                        <span class="field-control">
                            <input type="text" data-ng-model="filter.productName" />
                        </span>
                        <label></label>
                    </li>
                </ul>
            </div>
            <h2><a href="#/ProductEdit">Add New Product</a></h2>
            <table class="items-listing">
                <thead>
                    <tr>
                        <th>Code</th>
                        <th>Name</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="prod in products|filter:filter.productName">
                        <td ></td>
                        <td><a href="#/ProductEdit?code={{prod.code}}">{{prod.code}}</a></td>
                        <td>{{prod.name}}</td>
                        <td>{{prod.description}}</td>
                        <td><a href="#/?code={{prod.code}}">Delete</a></td>
                    </tr>
                </tbody>
            </table>
        </div>

Answer 2

您的 ng-repeat 指令应该在 tr 元素上，而不是 td 上。

<tr data-ng-repeat="product in products|filter:filter.productName">

不是问题的原因，而是要登录服务或控制器，您可以使用 $log 服务和字符串化来序列化您的对象。

$log.debug(JSON.stringify($scope.products));

Answer 3

查看您的代码，您从一开始就执行$scope.products = []。这将使角度观察空数组。

在您的 init 函数中，您将产品数组分配给 $scope.products。但由于 angular 仍在观察初始数组，它不会意识到变化。

解决方案是删除初始分配$scope.products = []，并确保更改原始数组但不要将其设置为新数组。

顺便说一句：您可以通过console.log(JSON.stringify($scope.products)) 获取更好的日志信息。