用 factory 讓兩個 controller 共享資源

通常,父子階層關係的 controller 間要呼叫 methon ,會使用$emit或著 $broadcast,但如果遇到同層間的傳遞,就必須要用factory(官網文件)來做,結構如下:

<div ng-controller="first">
    <!-- 很多結構 -->
</div>

<div ng-controller="second">
    <!-- 很多結構 -->
</div>

為了讓兩個 controller 間可以溝通,我們在 js 中新增 factory,如下:

var app = angular.module("app", []);

app.factory("sharedScope", function() {
    return {
        data: {
            text: '123'
        }
    };
});

app.controller("first", function($scope, sharedScope) {
    $scope.data1 = sharedScope.data;
});
               
app.controller("second", function($scope, sharedScope) {
    $scope.data2 = sharedScope.data;
});

我們可以看到,這個 factory被命名為sharedScope,並回傳了一個叫做data的物件,並有text的屬性。

然後first這個controller內 $scope.data1 綁定了 sharedScope.datasecond這個controller內 $scope.data2 也綁定了 sharedScope.data

這樣就完成了兩個 controller 對 factory資料的綁定,這裡有一個範例可以作為參考。

[待解問題] 雙向綁定(two-way bind)只有在陣列或物件?

上述我們看到 factory return的data物件,正常來說,我們如果改為直接 return 變數,應該也是可以吧? 如下:

app.factory("sharedScope", function() {
    return {
        dataText: '123'
    };
});

結果居然不會雙向綁定,老實說我也還不知道什麼原因,這其實有點不合常理,但就先這樣,如果你有解答麻煩告訴我,感激你Orz....

參考

http://stackoverflow.com/questions/9293423/can-one-controller-call-another
AngularJS - Communicating Between Controllers

Comments

comments powered by Disqus