分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

AngularJS实现Model缓存的方式

JavaScript   发布时间：2022-04-16  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了AngularJS实现Model缓存的方式，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

有的直接把对象赋值给Scope变量；有的在Provider中返回一个对象再赋值给Scope变量；有的在Provider中返回一个构造函数再赋值给Scope变量。本篇来一一体验。

首先自定义一个directive，用来点击按钮改变一个scope变量值。

updater',function(){ reutrn { scope: { user: '=' },template: '',link: function(scope,element,attrs){ element.on('click',function(){ scope.user.data = 'whaaaat?'; scope.$apply(); }) } }

■ 给Scope变量赋值一个对象

{ var first = this; first.user = {data: 'cool'}; }) .controller('SecondCtrl',function(){ var second = this; second.user = {data: 'cool'}; })

页面中：

{{user.data}} updater user="user">

<div ng-controller="SecondCtrl">
{{user.data}}
<input ng-model="user.data">
<div updater user="user">

以上，

■ 在Provider返回一个对象，赋值给Scope变量

{ var third = this; third.user = User; }]) .controller('FourthCtrl',function(User){ var fourth = this; fourth.user = User; }]) //provider返回对象 .provider('User',function(){ this.$get = function(){ return { data: 'cool' } }; })

页面中：

{{user.data}} updater user="user">

<div ng-controller="FourthCtrl">
{{user.data}}
<input ng-model="user.data">
<div updater user="user">

以上，

■ 在Provider中返回一个构造函数，赋值给Scope变量

{ var fifth = this; fifth.user = new UserModel(); }]) .controller('SixthCtrl',function(UserModel){ var sixth = this; sixth.user = new UserModel(); }]) //provider返回构造函数，每一次构造，就生成一个实例 .provider('UserModel',function(){ this.$get = function(){ return function(){ this.data = 'cool'; } } })

页面中：

{{user.data}} updater user="user">

<div ng-controller="SixthCtrl">
{{user.data}}
<input ng-model="user.data">
<div updater user="user">

以上，

■ 在Provider中返回一个构造函数，带缓存字段，赋值给Scope变量

smartUserModel',function(smartUserModel){ var seventh = this; seventh.user = new smartUserModel(1); }]) .controller('EighthCtrl',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;
}];
})

页面中：

{{user.data}} updater user="user">

<div ng-controller="EighthCtrl">
{{user.data}}
<input ng-model="user.data">
<div updater user="user">

以上，

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

大佬总结

以上是大佬教程为你收集整理的AngularJS实现Model缓存的方式全部内容，希望文章能够帮你解决AngularJS实现Model缓存的方式所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap