Angluarjs控制器之间传递对象

Question

我是一个有角度的新手，试图学习和我有控制器之间传递对象的问题。它的工作原理，如果我有一个数组做

我的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

这实际上有效。我不知道这是最好的做法，在世界的角度，但嘿...

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

小提琴可在这里：http://jsfiddle.net/XmWUP/125/

Answer 2

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

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

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