Question

我用角度制作了一个转发器，它显示了json数组中的一些数据。

 <html ng-app="myApp">
<head>
    <title>Suitcases</title>
</head>
    <body ng-controller="suitCaseController">
        <h2>SuitCases</h2>

        <ul class="nav">
            <li><a href="#addSuitcase"> Add New SuitCase </a></li>
        </ul>


        <div ng-repeat="suitcase in suitcases">
            <input type="checkbox" ng-model="suitcase.Locked" />    
            <p ng-bind="suitcase.Locked"></p>
            <p ng-bind="suitcase.Wheels"></p>   
        </div>

        <div ng-view></div>

        <script type="text/javascript" src="/Scripts/angular.js"></script>
        <script type="text/javascript" src="/Scripts/angular-route.js"></script>
        <script>

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

            myApp.config([
                '$routeProvider',
                function($routeProvider) {
                    $routeProvider.
                        when('/addSuitcase', {
                            templateUrl: 'suitcase/addsuitcase',
                            controller: 'suitCaseController'
                        }).
                        otherwise({
                            redirectTo: '/'
                        });
                }
            ]);

            angular.module('myApp').controller('suitCaseController', function ($scope, suitcaseRepository) {

                suitcaseRepository.GetSuitcases().success(function (data) {
                    $scope.suitcases = data;
                });

                $scope.AddSuitcase = function(suitcase) {
                    console.log(suitcase);
                    $scope.suitcases.push(suitcaseRepository.AddSuitcase(suitcase));
                    console.log($scope.suitcases);
                }

            });

            angular.module('myApp').factory('suitcaseRepository', function ($http) {

                return {
                    AddSuitcase: function(suitcase) {
                        return suitcase;
                    },
                    GetSuitcases: function() {
                        var url = '/SuitCase/GetSuitcases';
                        return $http.post(url);
                    }
                };
            });

        </script>
    </body>
</html>

新项目的表单通过路由提供程序加载，如下所示：

<form>
Locked: <input type="checkbox" ng-model="suitcase.Locked" />
Wheels: <input type="text" ng-model="suitcase.Wheels" />
<button ng-click="AddSuitcase(suitcase)">Add</button>

如果我使用此表单向数组添加项目，则转发器不会更新。如果我将表单粘贴到主代码中，那么它实际上会将项目添加到显示的列表中。

我在这里缺少什么？如果我使用单独加载的视图，为什么转发器不会更新？

Answer 1

主要问题是您有suitCaseController的2个实例。

一个在主html中，另一个在<ng-view>。

每次初始化控制器时，它都是新实例，因此用于重复suitcases的实例未连接到表单中的实例

要在树结构中显示它，它看起来像：

<body ng-controller="suitCaseController">
     <!-- some html doing ng-repeat using first instance of controller-->
     <ng-view>
         <!-- nested instance of controller -->
         <form  ng-controller="suitCaseController">
      </ng-view>

<body>

如果您通过服务共享suitcases的实际数据对象，那么两个实例中的数据都是相同的......但是同一个控制器的嵌套实例并不理想并且令人困惑

将项添加到数组后，不会更新转发器

1 个答案: