Question

我在Angular中有以下代码，它试图在同一网页上允许同一个Controller的多个实例。问题是，每次创建新实例时，它都会将自身添加到实例对象，但会删除实例对象上的其他属性（即实例）。我认为这是一个与Angular无关的简单javascript语法问题，但我无法弄清楚。有什么建议吗？

angular.module('mean.root').controller('ContentA1Controller', ['$scope', '$location', 'Global', 'Data', '$timeout', '$interval', 'Clients', 'Modals', '$element', function ($scope, $location, Global, Data, $timeout, $interval, Clients, Modals, $element) {

            // Defaults
            $scope.instances = { A: {}, B: {}, C: {}, D: {}, E: {}, F: {} };

            // Methods
            $scope.createNewInstance = function() {
                var instance = $($element).closest('.content-container').attr('id');
                // Add ID to content
                $($element).find('.content').attr( "id", "contentA1instance"+instance );
                Data.priceByDay(function(prices){
                    // Load Chart Data
                    $scope.instances[instance].data = [1,2,3,4,5];
                    // Log Instance Object
                    console.log($scope.instances);

因此，当我向控制器添加一个实例时，它可以工作并且我记录：

$scope.instances = { A: { data: [1,2,3,4,5] }, B: {}, C: {}, D: {}, E: {}, F: {} }

然后当我添加另一个实例时，再次运行createNewInstance（）方法，它会记录：

$scope.instances = { A: {}, B: { data: [1,2,3,4,5] }, C: {}, D: {}, E: {}, F: {} }

Answer 1

我建议为每个实例使用不同的控制器并在$ rootScope中保留共享数据，或者更好地为整个页面使用一个控制器并让每个实例仅在一个映射项上运行。

Answer 2

var instance = $($element).closest('.content-container').attr('id');
....
$scope.instances[instance].data = [1,2,3,4,5];

它选择与页面中绑定控制器的元素最接近的id .content-container。由于您说您已经使用过控制器两次，因此其中一个绑定更接近.content-container#A，一个更接近.content-container#B。这看起来代码是“按设计工作”但你可能没有“设计你的意思”。

为什么我的对象属性被覆盖？

2 个答案: