两个控制器之间的通信；参考与原语

Question

我在 Angularjs 的工厂看到了意想不到的行为。我用一个工厂在两个控制器之间进行通信。

在第一种情况下它工作正常但在第二种情况下则不然。它们之间的唯一区别是，在第一个示例中，我从视图中访问名称，但在第二个示例中，我在范围变量中访问。

场景一

<div ng-controller="HelloCtrl">
    <a ng-click="setValue('jhon')">click</a>
</div>
<br />
<div ng-controller="GoodbyeCtrl">
    <p>{{fromFactory.name}}</p>
</div>

//angular.js example for factory vs service
var app = angular.module('myApp', []);

    app.factory('testFactory', function() {
        var obj = {'name':'rio'};
        return {
            get : function() {
                return obj;
            },
            set : function(text) {
               obj.name = text;
            }
        }          
    });

    function HelloCtrl($scope, testFactory) {
        $scope.setValue = function(value) {
            testFactory.set(value);
        }
    }

    function GoodbyeCtrl($scope, testFactory) {
        $scope.fromFactory = testFactory.get();
    }

场景二

<div ng-controller="HelloCtrl">
    <a ng-click="setValue('jhon')">click</a>
</div>
<br />
<div ng-controller="GoodbyeCtrl">
    <p>{{fromFactory}}</p>
</div>

//angular.js example for factory vs service
var app = angular.module('myApp', []);
    app.factory('testFactory', function() {
        var obj = {'name':'rio'};
        return {
            get : function() {
                return obj;
            },
            set : function(text) {
               obj.name = text;
            }  
        }               
    });

    function HelloCtrl($scope, testFactory) {
        $scope.setValue = function(value) {
            testFactory.set(value);
        }
    }
    function GoodbyeCtrl($scope, testFactory) {
        $scope.fromFactory = testFactory.get().name;
    }

Answer 1

区别是：

情景一

$scope.fromFactory = testFactory.get(); 

<div ng-controller="GoodbyeCtrl">
<p>  {{fromFactory.name}}</p>
</div>

$scope 变量设置为 testFactory.get()，这是一个对象 reference。在每个摘要周期中，观察者使用对象引用获取属性 name 的值。 DOM 随属性的更改而更新。

场景二

$scope.fromFactory = testFactory.get().name;

<div ng-controller="GoodbyeCtrl">
    <p>{{fromFactory}}</p>
</div>

$scope 变量设置为 testFactory.get().name，这是一个原始。在每个摘要循环中，原始值不会改变。

重要的区别在于，当一个引用值被传递给一个函数，并且一个函数修改了它的内容时，调用者和任何其他引用该对象的函数都会看到这种变化。

两个控制器之间的通信；参考与原语

Communication Between Two Controllers; References vs Primatives

angularjs

pass-by-reference

angular-services

angular-controller

情景一

场景二