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，如需转载请自行联系原作者