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 attachEvent传递参数的办法
Dec 14 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
canvas绘制多边形
Feb 24 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
微信小程序实现星星评分效果
Nov 01 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
php提示undefined index的几种解决方法
2012/05/21 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
python获取网页状态码示例
2014/03/30 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
Exception类的常用方法
2012/06/16 面试题
幼儿园园长自我鉴定
2013/10/22 职场文书
企业授权委托书范本
2014/09/22 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python