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 深拷贝函数
Dec 04 Javascript
JavaScript 题型问答有答案参考
Feb 17 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 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
怎样辨别一杯好咖啡
2021/03/03 新手入门
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
JavaScript打字小游戏代码
2011/12/26 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
python字典序问题实例
2014/09/26 Python
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
实习生个人找工作的自我评价
2013/10/30 职场文书
仓库班组长岗位职责
2013/12/12 职场文书
管道维修工岗位职责
2013/12/27 职场文书
四群教育工作总结
2015/08/10 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript