我制作了一个 Angular 中继器，显示来自 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>
如果我使用此表单向数组添加项目，则转发器不会更新。如果我将表单粘贴到主代码中，它实际上会将项目添加到显示的列表中。
我在这里错过了什么？如果我使用单独加载的 View ，为什么转发器没有更新？
最佳答案
主要问题是您有 2 个 suitCaseController 实例.
一个在主 html 中，另一个在 <ng-view> 中.
每次您初始化 Controller 时，它都是一个新实例，因此用于重复 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 的实际数据对象通过您的服务，那么两个实例中的数据将是相同的......但是具有相同 Controller 的嵌套实例并不理想并且令人困惑
关于javascript - 将项目添加到数组后，转发器未更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31413661/