Angularjs 在控制器之间传递对象

Question

我是 angular 的新手，正在努力学习，但在控制器之间传递对象时遇到问题。如果我用数组

来做它会起作用

我的JS

 var app = angular.module('myApp', []);    
app.factory('messages', function(){
    var messages = {};

    messages.list = [];

    messages.add = function(message){
    messages.list.push({id: messages.list.length, text: message});
    };

    return messages;
    });

    app.factory('portfolio', function(){
      var portfolio = {};

      portfolio.list = [];

      portfolio.add = function(newProperty){
        portfolio.list.push(newProperty);
      };

      return portfolio;
    });


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

      self.messages = messages.list;
      self.portfolio = portfolio.list;
    });

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

        message = 'property added';

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

我的HTML

    <div>
    <h1>Services</h1>

  <div ng-controller="ListCtrl as list"> 
    <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 />
<p ng-repeat="message in list.messages">{{ message.id }}: {{ message.text }}</p>
<p ng-repeat="prop in list.portfolio">New Item: {{prop.legal}}: {{prop.stamp}} </p>
  </div>
  </div>
  </div>

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

所以我知道问题出在对象上，我发现我应该使用 angular.copy() 但不确定如何在推送中使用它。

感谢您的帮助！

Answer 1

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

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' 已经初始化，以便它可以收听广播。

Answer 2

这确实有效。我不知道这是否是 angular 世界的最佳做法，但是嘿...

<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);
  };
});

Fiddle 可在此处获取：http://jsfiddle.net/XmWUP/125/

Angularjs 在控制器之间传递对象

Angluarjs passing objects between controler

angularjs

angularjs-service

angularjs-factory