AngularJS实现Model缓存的方式


Posted in Javascript onFebruary 03, 2016

在AngularJS中如何实现一个Model的缓存呢?

可以通过在Provider中返回一个构造函数,并在构造函数中设计一个缓存字段,在本篇末尾将引出这种做法。

一般来说,Model要赋值给Scope的某个变量。

有的直接把对象赋值给Scope变量;有的在Provider中返回一个对象再赋值给Scope变量;有的在Provider中返回一个构造函数再赋值给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中返回一个构造函数,赋值给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返回构造函数,每一次构造,就生成一个实例
 .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中返回一个构造函数,带缓存字段,赋值给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返回构造函数,根据id获取,如果第一次就创建一个放缓存字段中,以后从缓存中获取
 .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

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 #Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 #Javascript
简单实现js选项卡切换效果
Feb 03 #Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 #Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 #Javascript
javascript自定义滚动条实现代码
Apr 20 #Javascript
JavaScript File API实现文件上传预览
Feb 02 #Javascript
You might like
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
入党申请人的自我鉴定
2013/12/01 职场文书
暑期社会实践学生的自我评价
2014/01/09 职场文书
死者家属慰问信
2015/03/24 职场文书
2015年助残日活动总结
2015/03/27 职场文书
禁毒主题班会教案
2015/08/14 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
Java实现给Word文件添加文字水印
2022/02/15 Java/Android