AngularJS實現(xiàn)Model緩存的方式
在AngularJS中如何實現(xiàn)一個Model的緩存呢?
可以通過在Provider中返回一個構(gòu)造函數(shù),并在構(gòu)造函數(shù)中設計一個緩存字段,在本篇末尾將引出這種做法。
一般來說,Model要賦值給Scope的某個變量。
有的直接把對象賦值給Scope變量;有的在Provider中返回一個對象再賦值給Scope變量;有的在Provider中返回一個構(gòu)造函數(shù)再賦值給Scope變量。本篇來一一體驗。
首先自定義一個directive,用來點擊按鈕改變一個scope變量值。
angular .module('app',[]) .directive('updater', function(){ reutrn { scope: { user: '=' }, template: '<button>Change User.data to whaaaat?</button>', link: function(scope, element, attrs){ element.on('click', function(){ scope.user.data = 'whaaaat?'; scope.$apply(); }) } }
■ 給Scope變量賦值一個對象
.controller('FirstCtrl', function(){ var first = this; first.user = {data: 'cool'}; }) .controller('SecondCtrl', function(){ var second = this; second.user = {data: 'cool'}; })
頁面中:
<div ng-controller="FirstCtrl"> {{user.data}} <input ng-model="user.data"> <div updater user="user"></div> </div> <div ng-controller="SecondCtrl"> {{user.data}} <input ng-model="user.data"> <div updater user="user"></div> </div>
以上,
- ● 改變FirstCtrl中input的值,僅僅影響FirstCtrl中的變量user,不影響SecondCtrl中的變量user
- ● 點擊FirstCtrl中的按鈕,僅僅影響FirstCtrl中的變量user
- ● 改變SecondCtrl中的input的值,僅僅影響SecondCtrl中的變量user,不影響FirstCtrl中的變量user
- ● 點擊SecondCtrl中的按鈕,僅僅影響SecondCtrl中的變量user
■ 在Provider返回一個對象,賦值給Scope變量
.controller('ThirdCtrl',['User', function(User){ var third = this; third.user = User; }]) .controller('FourthCtrl', ['User',function(User){ var fourth = this; fourth.user = User; }]) //provider返回對象 .provider('User', function(){ this.$get = function(){ return { data: 'cool' } }; })
頁面中:
<div ng-controller="ThirdCtrl"> {{user.data}} <input ng-model="user.data"> <div updater user="user"></div> </div> <div ng-controller="FourthCtrl"> {{user.data}} <input ng-model="user.data"> <div updater user="user"></div> </div>
以上,
- ● 改變ThirdCtrl中input的值,同時影響ThirdCtrl和FourthCtrl中的變量user
- ● 點擊ThirdCtrl中的按鈕,同時影響ThirdCtrl和FourthCtrl中的變量user
- ● 改變FourthCtrl中input的值,同時影響ThirdCtrl和FourthCtrl中的變量user
- ● 點擊FourthCtrl中的按鈕,同時影響ThirdCtrl和FourthCtrl中的變量user
■ 在Provider中返回一個構(gòu)造函數(shù),賦值給Scope變量
.controller('FifthCtrl',['UserModel', function(UserModel){ var fifth = this; fifth.user = new UserModel(); }]) .controller('SixthCtrl',['UserModel', function(UserModel){ var sixth = this; sixth.user = new UserModel(); }]) //provider返回構(gòu)造函數(shù),每一次構(gòu)造,就生成一個實例 .provider('UserModel', function(){ this.$get = function(){ return function(){ this.data = 'cool'; } } })
頁面中:
<div ng-controller="FifthCtrl"> {{user.data}} <input ng-model="user.data"> <div updater user="user"></div> </div> <div ng-controller="SixthCtrl"> {{user.data}} <input ng-model="user.data"> <div updater user="user"></div> </div>
以上,
- ● 改變FifthCtrl中input的值,僅僅影響FifthCtrl中的變量user,不影響SixthCtrl中的變量user
- ● 點擊FifthCtrl中的按鈕,僅僅影響FifthCtrl中的變量user
- ● 改變SixthCtrl中的input的值,僅僅影響SixthCtrl中的變量user,不影響FifthCtrl中的變量user
- ● 點擊SixthCtrl中的按鈕,僅僅影響SixthCtrl中的變量user
■ 在Provider中返回一個構(gòu)造函數(shù),帶緩存字段,賦值給Scope變量
.controller('SeventhCtrl',['SmartUserModel', function(SmartUserModel){ var seventh = this; seventh.user = new SmartUserModel(1); }]) .controller('EighthCtrl',['SmartUserModel', function(SmartUserModel){ var eighth = this; eighth.user = new SmartUserModel(1); }]) //provider返回構(gòu)造函數(shù),根據(jù)id獲取,如果第一次就創(chuàng)建一個放緩存字段中,以后從緩存中獲取 .provider('SmartUserModel', function(){ this.$get = ['$timeout', function($timeout){ var User = function User(id){ //先從緩存字段提取 if(User.cached[id]){ return User.cached[id]; } this.data = 'cool'; User.cached[id] = this; }; User.cached = {}; return User; }]; })
頁面中:
<div ng-controller="SeventhCtrl"> {{user.data}} <input ng-model="user.data"> <div updater user="user"></div> </div> <div ng-controller="EighthCtrl"> {{user.data}} <input ng-model="user.data"> <div updater user="user"></div> </div>
以上,
- ● 改變SeventhCtrl中input的值,同時影響SeventhCtrl和EighthCtrl中的變量user
- ● 點擊SeventhCtrl中的按鈕,同時影響SeventhCtrl和EighthCtrl中的變量user
- ● 改變EighthCtrl中input的值,同時影響SeventhCtrl和EighthCtrl中的變量user
- ● 點擊EighthCtrl中的按鈕,同時影響SeventhCtrl和EighthCtrl中的變量user
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助。
相關文章
通過AngularJS實現(xiàn)圖片上傳及縮略圖展示示例
本篇文章主要介紹了通過AngularJS實現(xiàn)圖片上傳及縮略圖展示,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-01-01AngularJS 將再發(fā)布一個重要版本 然后進入長期支持階段
目前團隊正在開發(fā) AngularJS 1.7.0,而 1.7 的開發(fā)周期將一直持續(xù)到 2018 年 6 月 30 日2018-01-01詳解Angular調(diào)試技巧之報錯404(not found)
本篇文章主要介紹了詳解Angular調(diào)試技巧之報錯404(not found),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01詳解Angular中實現(xiàn)自定義組件的雙向綁定的兩種方法
這篇文章主要介紹了詳解Angular中實現(xiàn)自定義組件的雙向綁定的兩種方法,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2018-11-11