在角度控制器之间传递数据答案

【问题标题】：Passing data between angular controllers在角度控制器之间传递数据
【发布时间】：2017-01-12 03:53:51
【问题描述】：

下面是我试图在两个控制器之间传递/同步值的示例代码。对于相同的视图，我有一个文本框和两个用于显示文本框值的占位符。

我以某种方式实现了这种行为，但仍然无法弄清楚为什么代码不能在一个地方工作而在另一个地方表现良好。我提到了两种方法，一种有效（第二种方法），一种无效（第一种方法）。

我用过以下：

1 服务
2 个控制器
1 次观看

服务

mcApp.factory('mcService', function($rootScope){
    var service = {};

    //variable 1
    service.message = 'Default';

    //function 1
    service.getMessage = function(){
        return this.message;
        }

    //function 2
    service.setMessage = function(msg){
        this.message = msg;
        }
    return service;
});

控制器 - 第一种方式 - 不工作

mcApp.controller('mcController1', function ($scope, mcService) {
        $scope.message = mcService.getMessage();
        $scope.setmsg = function(msg){
        mcService.setMessage(msg);
    }
});

mcApp.controller('mcController2', function($scope, mcService){
    $scope.message = mcService.getMessage();
});

查看 - 第一种方式 - 无效

<div ng-app="mcApp">
    <div ng-controller="mcController1">
        <input type="text" ng-model="message" ng-change="setmsg(message)">
        <p ng-bind="message"></p>
    </div>

    <div ng-controller="mcController2">
        <p ng-bind="message"></p>
    </div>
</div>

在上面的代码中，我通过调用“mcController2”中的服务方法“getMessage()”来更新范围变量“message”的值。但是它没有在视图中更新。

下面是代码，我没有直接使用“mcController2”中的服务方法“getMessage()”，而是将服务分配给范围变量。

控制器 - 第二种方式 - 工作

mcApp.controller('mcController1', function ($scope, mcService) {
    $scope.message = mcService.getMessage();
    $scope.setmsg = function (msg) {
        mcService.setMessage(msg);
    }
});

mcApp.controller('mcController2', function ($scope, mcService) {
    $scope.service = mcService;
});

查看 - 第二种方式 - 工作

<div ng-app="mcApp">
    <div ng-controller="mcController1">
        <input type="text" ng-model="message" ng-change="setmsg(message)">
        <p ng-bind="message"></p>
    </div>

    <div ng-controller="mcController2">
        <p ng-bind="service.message"></p>
    </div>
</div>

请注意：在第一种方式中使用$rootScope.$broadcast in service 和$scope.$on in controller 也可以完成工作。但我无法弄清楚为什么 Fisrt way 不起作用。

【问题讨论】：

我不确定第二种方法是否可行。您确定吗？你能用 plunkr 来说明它吗？

标签： angularjs-service angularjs-controller

【解决方案1】：

第一种方法行不通，因为您传递原始对象 --- 按值传递

-- 如果旧值发生更改，则按值传递变量将不会被反映。

第二种方法效果很好，因为您传递了复杂的对象 --- 通过引用传递。 -- 如果旧值发生更改，则通过引用传递变量将被反映。例如：

var x = {
    name: "BeSaRa",
    country: "Egypt",
    like: [
        'PHP',
        'Javascript',
        'MYSQL'
    ]
};

var v = x.name; // pass by value  becouse the string is primitve object 

var r = x.like; // pass by reference because the array is Complex Object

// try to change the name below this line 
x.name = "Ahmed Mostafa";

console.log(v) // output --> "BeSaRa" it is not reflected by the change

// try to change the like property below this line 

x.like.push("AngularJS"); // add AngularJS to the Array 

console.log(r) // output ['PHP','Javascript','MYSQL','AngularJS'];

希望你现在明白了：D

JavaScript 中的基本类型：

布尔值空值不明确的数字细绳符号（ECMAScript 6 中的新功能）

任何其他复杂的东西:)

【讨论】：