AngulatJS多個控制器内資料共享

     利用factory和service方法定義服務，通過兩個控制器利用同一個服務達到控制器間資料共享的效果。

<code>&lt;!DOCTYPE html&gt;</code>

<code>&lt;</code><code>html</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code> <code>ng-app</code><code>=</code><code>"app"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>ng-controller</code><code>=</code><code>"Controller1"</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>ng-model</code><code>=</code><code>"value1.message"</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>p</code><code>&gt;first:&lt;</code><code>span</code> <code>ng-bind</code><code>=</code><code>"value1.message"</code><code>&gt;&lt;/</code><code>span</code><code>&gt;&lt;/</code><code>p</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>ng-controller</code><code>=</code><code>"Controller2"</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>p</code><code>&gt;second:&lt;</code><code>span</code> <code>ng-bind</code><code>=</code><code>"value2.message"</code><code>&gt;&lt;/</code><code>span</code><code>&gt;&lt;/</code><code>p</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</code>

<code>    </code><code>angular.module('app', [])</code>

<code>        </code><code>.factory('Data', function() {</code>

<code>            </code><code>return {</code>

<code>                </code><code>message: ''</code>

<code>            </code><code>};</code>

<code>        </code><code>})</code>

<code>        </code><code>.controller('Controller1', function($scope, Data) {</code>

<code>            </code><code>$scope.value1 = Data;</code>

<code>        </code><code>.controller('Controller2', function($scope, Data) {</code>

<code>            </code><code>$scope.value2 = Data;</code>

<code>        </code><code>});</code>

<code>    </code><code>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

      這裡使用的是factory方法，定義了名為Data的服務，這個服務就是連接配接兩個controller的橋梁。

本文轉自 iampomelo 51CTO部落格，原文連結：http://blog.51cto.com/iampomelo/1666896，如需轉載請自行聯系原作者