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

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

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

这实际上有效。我不知道这是角度世界中的最佳实践，但是嘿......

<div id="sidebar">
     @{ Html.RenderAction("LoadMenu", "Partial"); }
</div>

和

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

此处提供小提琴：http://jsfiddle.net/XmWUP/125/

Angluarjs在控制器之间传递物体

2 个答案: