AngularJS:控制器中的工厂模型没有更新

Question

我有一个AngularJS工厂返回一个简单的模型，它在控制器中被使用:

app.factory('myFactory1', function () {
    var model = {
        foo: 'original'
    };
    function changeModel () {
        model = {
            foo: 'changed'
        }
        // model.foo = 'changed'; would work! why?
    }
    // esposed API
    return {
        model: model,
        changeModel: function () {
            changeModel();
        }
    };  
});
function FooCtrl (myFactory1) {
    myFactory1.changeModel();
    this.model1 = myFactory1.model // model1 not updated
}

问题是控制器中的视图模型在chnageModel()被调用后没有更新。这个小提琴的完整例子:http://jsfiddle.net/eobq064h/1/

Answer 1

问题在于您关闭model的工厂，然后您用新的model替换model。这种替换不会影响原始闭包——原始的model保持不变，并且闭包被对新实例的引用所替换。你必须更新model的内容，而不是替换model。

这就是为什么你的注释掉行工作正常。它更新模型的内容，而不是整个模型。

function FooCtrl (myFactory1) {
    myFactory1.changeModel();
    this.model1 = myFactory1.model // model1 not updated
}
app.factory('myFactory1', function () {
    var model = {
        foo: 'original'
    };
    function changeModel () {
        model.foo = 'change';
    }
    // esposed API
    return {
        model: model,
        changeModel: function () {
            changeModel();
        }
    };  
});
function FooCtrl (myFactory1) {
    myFactory1.changeModel();
    this.model1 = myFactory1.model // model1 not updated
}

Answer 2

这里已经更新成你想要的样子，加上添加注释和标记你的功能(在哪个是工厂，哪个是服务)，但不触及你的FooCtrl。只有factory1和factory2

http://jsfiddle.net/eobq064h/2/

app.factory('myFactory2', function TheFactory() {
    var model = {
        foo: 'original'
    };
    // returning a new service instance
    return new TheService();
    // esposed API
    // returning a service with api and a model
    function TheService() {
        var oThis = this;
        oThis.model = model;
        // public methods
        oThis.changeModel = function () {
            changeModel();
        }
        // private methods
        function changeModel() {
            oThis.model.foo = 'changed';
        }
    };  
});