AngularJS實(shí)現(xiàn)controller控制器間共享數(shù)據(jù)的方法示例
本文實(shí)例講述了AngularJS實(shí)現(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>
運(yùn)行效果:
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
- AngularJS控制器controller正確的通信的方法
- AngularJs學(xué)習(xí)第五篇從Controller控制器談?wù)?scope作用域
- AngularJS控制器controller給模型數(shù)據(jù)賦初始值的方法
- 詳解Angularjs在控制器(controller.js)中使用過(guò)濾器($filter)格式化日期/時(shí)間實(shí)例
- AngularJS 控制器 controller的詳解
- AngularJS利用Controller完成URL跳轉(zhuǎn)
- Angularjs中controller的三種寫(xiě)法分享
- angularJS+requireJS實(shí)現(xiàn)controller及directive的按需加載示例
- Angularjs的Controller間通信機(jī)制實(shí)例分析
相關(guān)文章
AngularJS 監(jiān)聽(tīng)變量變化的實(shí)現(xiàn)方法
今天小編就為大家分享一篇AngularJS 監(jiān)聽(tīng)變量變化的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10Angular 輸入框?qū)崿F(xiàn)自定義驗(yàn)證功能
AngularJS 表單和控件可以驗(yàn)證輸入的數(shù)據(jù)。本文給大家介紹Angular 輸入框?qū)崿F(xiàn)自定義驗(yàn)證功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-02-02AngularJS出現(xiàn)$http異步后臺(tái)無(wú)法獲取請(qǐng)求參數(shù)問(wèn)題的解決方法
這篇文章主要介紹了AngularJS出現(xiàn)$http異步后臺(tái)無(wú)法獲取請(qǐng)求參數(shù)問(wèn)題的解決方法,較為詳細(xì)的分析了AngularJS出現(xiàn)異步請(qǐng)求后臺(tái)無(wú)法解析的原因與相應(yīng)的解決方法,需要的朋友可以參考下2016-11-11AngularJS directive返回對(duì)象屬性詳解
這篇文章主要為大家纖細(xì)介紹了AngularJS directive返回對(duì)象屬性的相關(guān)內(nèi)容,感興趣的小伙伴們可以參考一下2016-03-03AngularJS使用指令增強(qiáng)標(biāo)準(zhǔn)表單元素功能
這篇文章主要介紹了AngularJS使用指令增強(qiáng)標(biāo)準(zhǔn)表單元素功能,包括數(shù)據(jù)綁定、建立模型屬性、驗(yàn)證表單等,感興趣的小伙伴們可以參考一下2016-07-07AngularJS模仿Form表單提交的實(shí)現(xiàn)代碼
本文通過(guò)一段實(shí)例代碼給大家簡(jiǎn)單介紹了angularjs模仿form表單提交的方法,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-12-12Angular中$cacheFactory的作用和用法實(shí)例詳解
$cacheFactory是一個(gè)為Angular服務(wù)生產(chǎn)緩存對(duì)象的服務(wù)。接下來(lái)通過(guò)本文給大家介紹Angular中$cacheFactory的作用和用法實(shí)例詳解,非常不錯(cuò),感興趣的朋友一起看下吧2016-08-08Angular4.x Event (DOM事件和自定義事件詳解)
今天小編就為大家分享一篇Angular4.x Event (DOM事件和自定義事件詳解),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10Angular.js 實(shí)現(xiàn)數(shù)字轉(zhuǎn)換漢字實(shí)例代碼
這篇文章主要介紹了Angular.js 實(shí)現(xiàn)數(shù)字轉(zhuǎn)換漢字實(shí)例代碼的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07