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 相关文章推荐
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
理顺8个版本vue的区别(小结)
Sep 17 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 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模板函数 正则实现代码
2012/10/15 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
python模块restful使用方法实例
2013/12/10 Python
Python文件去除注释的方法
2015/05/25 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
基于python图像处理API的使用示例
2020/04/03 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
美国第一香水网站:Perfume.com
2017/01/23 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
岗位职责定义及内容
2013/11/08 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
精神文明建设标语
2014/06/16 职场文书
禁毒宣传标语
2014/06/19 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
红色影片观后感
2015/06/18 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
尝试使用Python爬取城市租房信息
2022/04/12 Python
ant design vue的form表单取值方法
2022/06/01 Vue.js