Question

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

我已经以某种方式实现了这种行为，但仍然无法弄清楚为什么代码不在一个地方工作而在另一个地方做得很好。我提到了两种方法，一种是工作方式（第二种方式），另一种方式不是（第一种方式）。

我使用了以下内容：

1服务
2个控制器
1 view

服务

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和控制器中的$scope.$on也可以完成工作。但我无法弄清楚为什么 Fisrt方式无效。

Answer 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中的新内容）

任何其他复杂的东西:)

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

1 个答案: