AngularJS實現(xiàn)controller控制器間共享數(shù)據(jù)的方法示例

更新時間：2017年10月30日 10:55:54 作者：timelessmemoryli

這篇文章主要介紹了AngularJS實現(xiàn)controller控制器間共享數(shù)據(jù)的方法,結合簡單實例形式分析了AngularJS控制器數(shù)據(jù)共享的實現(xiàn)方法,需要的朋友可以參考下

本文實例講述了AngularJS實現(xiàn)controller控制器間共享數(shù)據(jù)的方法。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>chabaoo.cn 控制器間共享數(shù)據(jù)</title>
  <link rel="stylesheet"  rel="external nofollow" > 
  <style>
    body { 
      padding-top:30px; 
    }
  </style>
  <script src="angular.min.js"></script> 
  <script>
    angular.module('myapp', [])
    .factory("Data", function() {
      return {
        msg:"hello world"
      };
    })
    .controller("CtrlF", function($scope, Data) {
      $scope.data = Data;
    })
    .controller("CtrlS", function($scope, Data) {
      $scope.data = Data;
    });
  </script>
</head>
<body>
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<div ng-controller="CtrlF">
  <input type="text" ng-model="data.msg">
  <h1>{{data.msg}}</h1>
</div>
<div ng-controller="CtrlS">
  <input type="text" ng-model="data.msg">
  <h1>{{data.msg}}</h1>
</div>
</div><!-- col-sm-8 -->
</div><!-- /container -->
</body>
</html>

運行效果：

更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》

希望本文所述對大家AngularJS程序設計有所幫助。

您可能感興趣的文章:

詳解使用angular的HttpClient搭配rxjs
本篇文章主要介紹了詳解使用angular的HttpClient搭配rxjs ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
AngularJS 監(jiān)聽變量變化的實現(xiàn)方法
今天小編就為大家分享一篇AngularJS 監(jiān)聽變量變化的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
Angular 輸入框實現(xiàn)自定義驗證功能
AngularJS 表單和控件可以驗證輸入的數(shù)據(jù)。本文給大家介紹Angular 輸入框實現(xiàn)自定義驗證功能，非常不錯，具有參考借鑒價值，需要的朋友參考下
2017-02-02
AngularJS出現(xiàn)$http異步后臺無法獲取請求參數(shù)問題的解決方法
這篇文章主要介紹了AngularJS出現(xiàn)$http異步后臺無法獲取請求參數(shù)問題的解決方法,較為詳細的分析了AngularJS出現(xiàn)異步請求后臺無法解析的原因與相應的解決方法,需要的朋友可以參考下
2016-11-11
AngularJS directive返回對象屬性詳解
這篇文章主要為大家纖細介紹了AngularJS directive返回對象屬性的相關內容，感興趣的小伙伴們可以參考一下
2016-03-03
AngularJS使用指令增強標準表單元素功能
這篇文章主要介紹了AngularJS使用指令增強標準表單元素功能，包括數(shù)據(jù)綁定、建立模型屬性、驗證表單等，感興趣的小伙伴們可以參考一下
2016-07-07
AngularJS模仿Form表單提交的實現(xiàn)代碼
本文通過一段實例代碼給大家簡單介紹了angularjs模仿form表單提交的方法，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧
2016-12-12
Angular中$cacheFactory的作用和用法實例詳解
$cacheFactory是一個為Angular服務生產(chǎn)緩存對象的服務。接下來通過本文給大家介紹Angular中$cacheFactory的作用和用法實例詳解，非常不錯，感興趣的朋友一起看下吧
2016-08-08
Angular4.x Event (DOM事件和自定義事件詳解)
今天小編就為大家分享一篇Angular4.x Event (DOM事件和自定義事件詳解)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
Angular.js 實現(xiàn)數(shù)字轉換漢字實例代碼
這篇文章主要介紹了Angular.js 實現(xiàn)數(shù)字轉換漢字實例代碼的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-07-07