Angularjs Angluarjs在控制器之间传递对象

我是一个有角度的新手，尝试学习，在控制器之间传递对象时遇到问题。如果我使用数组，它就会工作

我的JS

我的HTML

所以我知道问题出在物体上，我发现我应该使用angular.copy，但不确定如何在推的时候使用它

---

谢谢你的帮助

一个可能的解决方案是使用服务。 服务可用于在控制器之间共享变量。 例如：

myApp.service('service', function($rootScope){
     var variable;

     this.getVariable = function() {
          return variable;
     };

     this.setVariable = function(_variable) {
           variable = _variable;
           $rootScope.$broadcast('variableSet');
     };
});

myApp.controller('ctrl1', function($scope, service){
     $scope.$on('variableSet', function(){
          var variable = service.getVariable();
})

myApp.controller('ctrl2', function(service){
     var data = [{'type':'car'},{'type':'bike'}];
     service.setVariable(data);
})
;

---

确保控制器“ctrl1”已经初始化，以便它可以收听广播。

这实际上是可行的。我不知道这是不是角形世界的最佳实践，但是嘿

<div>
<h1>Services</h1>


<div style="text-align: center">
        <h2>Initial investment</h2>

        <ul class="list">
                <input type="hidden" ng-model="newProperty.id" placeholder="id">
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.pprice" placeholder="Purchase price">
            </li>
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.mv" placeholder="Market value">
            </li>
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.stamp" placeholder="Stamp duty">
            </li>
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.sourcing" placeholder="Sourcing fee">
            </li>
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.legal" placeholder="Legal fee">
            </li>
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.other" placeholder="Other">
            </li>
        </ul>
    </div>
    <br />

<div ng-controller="ListCtrl as list"> 
  <p ng-repeat="prop in list.portfolio track by $index">
    New Object: {{prop.purchasePrice}}: {{prop.legaFee}} </p>
</div>

<div ng-controller="PostCtrl as post">
  <input type="button" ng-click="post.addProperty(newProperty); angular.copy({},newProperty)" value="Create Property"></input>
  <p>{{newProperty}} </p>
</div>

---

此处提供小提琴：

为什么用于创建新元素的按钮与表单输入不在同一个控制器中？这只是一个测试页面，目的是让2个控制者说话。最终将有3-4个html页面和表单，但我想使用1个对象。这不能用工厂完成吗？我的理解是，这是相当相似的。您还可以使用$rootScope。这对一个对象是必要的吗？因为如果我使用一个简单的数组，我的解决方案就可以工作。ThanksOh和我的对象是由表单创建的，我必须单独传递ctrl2中的所有值？或者我可以要这样的东西吗？myApp.controller'ctrl2'，functionservice，表单{var data=form；service.setVariabledata；}；对于表单，类似的操作可以在控制器$scope.anObject={}中完成：/$scope.submitFormData=函数_anObject{service.setVariable_anObject；}//在html提交对不起，我不知道如何使用工厂可以做到这一点。不用担心，我修复了它。。。我只是在我之前做的事情中没有得到一些东西。

myApp.service('service', function($rootScope){
     var variable;

     this.getVariable = function() {
          return variable;
     };

     this.setVariable = function(_variable) {
           variable = _variable;
           $rootScope.$broadcast('variableSet');
     };
});

myApp.controller('ctrl1', function($scope, service){
     $scope.$on('variableSet', function(){
          var variable = service.getVariable();
})

myApp.controller('ctrl2', function(service){
     var data = [{'type':'car'},{'type':'bike'}];
     service.setVariable(data);
})
;

<div>
<h1>Services</h1>


<div style="text-align: center">
        <h2>Initial investment</h2>

        <ul class="list">
                <input type="hidden" ng-model="newProperty.id" placeholder="id">
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.pprice" placeholder="Purchase price">
            </li>
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.mv" placeholder="Market value">
            </li>
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.stamp" placeholder="Stamp duty">
            </li>
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.sourcing" placeholder="Sourcing fee">
            </li>
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.legal" placeholder="Legal fee">
            </li>
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.other" placeholder="Other">
            </li>
        </ul>
    </div>
    <br />

<div ng-controller="ListCtrl as list"> 
  <p ng-repeat="prop in list.portfolio track by $index">
    New Object: {{prop.purchasePrice}}: {{prop.legaFee}} </p>
</div>

<div ng-controller="PostCtrl as post">
  <input type="button" ng-click="post.addProperty(newProperty); angular.copy({},newProperty)" value="Create Property"></input>
  <p>{{newProperty}} </p>
</div>

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

app.factory('Property', function () {

function Property(newProperty) {
 // Public properties, assigned to the instance ('this')
 this.purchasePrice = newProperty.pprice;
 this.marketValue = newProperty.mv;
 this.stampDuty = newProperty.stamp;
 this.sourcingFee = newProperty.sourcing;
 this.legaFee = newProperty.legal;
 this.otherFee = newProperty.other;
}

Property.prototype.getPurchasePrice = function () {
  return this.purchasePrice;
};

return {
    createNew: function(newProperty) {
         console.log( "Alert accomplished" );
        return new Property(newProperty);
    }
};
})




app.factory('portfolio', function(Property){
var portfolio = {};
portfolio.list = [];

portfolio.add = function(newProperty){
    var prop = Property.createNew(newProperty);
    portfolio.list.push(prop);
    alert(prop.purchasePrice);
};

return portfolio;
});


app.controller('ListCtrl', function (portfolio){
  var self = this;
  self.portfolio = portfolio.list;
});

app.controller('PostCtrl', function (portfolio){
  var self = this;

    self.addProperty = function(newProperty){
    portfolio.add(newProperty);
  };
});