刚开始使用angularjs,能感受到他的强大,也在学习的途中遇到一些问题

一般我们在angularjs中共享数据使用DI的方法,具体代码如下:

<script>
angular.module('myApp.service',[])
.factory('myService', function () {
var arr=[];
return{
add: function () {
arr.push(1);
},
data:arr
};
});
var myApp=angular.module('myApp',["myApp.service","myApp.filter"]);
myApp.controller('myController1', function ($scope,myService) {
$scope.hi=myService.data;
$scope.add= function () {
myService.add();
}
})
.controller('myController2', function ($scope,myService) {
$scope.hi=myService.data;
});
</script>

这样使用有一个问题,从服务返回的对象只能绑定对象实现双向绑定,如果使用返回对象的属性进行绑定就会出现绑定不上的问题.如下

controller('myController2', function ($scope,myService) {
$scope.hi=myService.data.length;
});

这个时候,如果希望绑定返回对象的属性值得时候该怎么做呢,我想到了使用自定义过滤器的方法解决.

如下面的列子,我希望能双向绑定数组对象的长度属性.

<script>
angular.module('myApp.service',[])
.factory('myService', function () {
var arr=[];
var obj={lg:0};
return{
add: function () {
arr.push(1);
obj.lg+=1;
},
data:arr,
KK:obj
};
});
angular.module('myApp.filter',[])
.filter('capitalize', function () {
return function (input) {
if(input){
return input.lg;
}
}
});
var myApp=angular.module('myApp',["myApp.service","myApp.filter"]);
myApp.controller('myController1', function ($scope,myService) {
$scope.hi=myService.data;
$scope.add= function () {
myService.add();
}
})
.controller('myController2', function ($scope,myService) {
$scope.hi=myService.KK;
});
</script>

当界面绑定数据的时候进行过滤,就可以得到想要的结果

controller共享数据的更多相关文章

  1. Angularjs调用公共方法与共享数据

    这个问题场景是在使用ionic开发页面的过程中发现,多个页面对应的多个controller如何去调用公共方法,比如给ionic引入了toast插件,如何将这个插件的调用变成公共方法或者设置成工具类,因 ...

  2. angularJS平行控制器间共享数据

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. 多租户实现之基于Mybatis,Mycat的共享数据库,共享数据架构

    前言 SaaS模式是什么? 传统的软件模式是在开发出软件产品后,需要去客户现场进行实施,通常部署在局域网,这样开发.部署及维护的成本都是比较高的. 现在随着云服务技术的蓬勃发展,就出现了SaaS模式. ...

  4. 让AngularJS的controllers之间共享数据

    如何让controller之间共享数据呢?大致是让不同controller中的变量指向同一个实例. 通过service创建一个存放共享数据的对象. .service("greeting&qu ...

  5. angular 使用服务共享数据需要注意

    在使用服务共享数据时,需要注意一些细节,否则会出现视图不刷新,也不报错这样的问题,遇到了,总结下 如下: <div ng-controller='ctr1'> <a href={{n ...

  6. 78.PL和PS通过BRAM交互共享数据

    本篇文章目的是使用Block Memory进行PS和PL的数据交互或者数据共享,通过zynq PS端的Master GP0端口向BRAM写数据,然后再通过PS端的Mater GP1把数据读出来,将结果 ...

  7. laravel5.5框架中视图间如何共享数据?视图间共享数据的两种方法

    laravel框架中视图间共享数据有两种,一种是用视图门面share()方法实现,另一种是用视图门面composer() 方法实现,那么,两种方法的实现究竟是怎样的呢?让我们来看一看接下来的文章内容. ...

  8. iOS: 在iPhone和Apple Watch之间共享数据: App Groups

    我们可以在iPhone和Apple Watch间通过app groups来共享数据.方法如下: 首先要在dev center添加一个新的 app group: 接下来创建一个新的single view ...

  9. 应用间共享数据方法(一)---sharepreferce

    SharedPreferences类,它是一个轻量级的存储类,特别适合用于保存软件配置参数. SharedPreferences保存数据,其背后是用xml文件存放数据,文件存放在/data/data/ ...

随机推荐

  1. android 底层开发入门(一)

    第一个Linux驱动程序:统计单词个数 一.首先了解一下: 打印机驱动写入数据:对于打印机驱动来说,需要接收这些被写入的数据,并将它们通过PC的并口.USB等端口发送给打印机.要实现这一过程就需要Li ...

  2. install vim

    常用命令: [0]安装vim: oee@copener:~$ sudo apt-get install vim vim-scripts vim-doc 刚安装完$HOME目录下只有两个文件:.vim/ ...

  3. A log about Reading the memroy of Other Process in C++/WIN API--ReadProcessMemory()

    Memory, is a complex module in Programing, especially on Windows. This time, I use cpp with win wind ...

  4. HttpClient封装工具类

    import java.io.IOException; import java.net.URI; import java.util.ArrayList; import java.util.List; ...

  5. bash while/until循环学习

    while循环:条件满足,则循环:失败,则退出 如何退出? 必须有时刻,条件测试不成功 ? :条件控制变量 while 条件测试:do 循环体 done until循环:条件不满足,则循环:否则,退出 ...

  6. div模态层示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. css预处理语言的模块化实践

    编写css是前端工作中,一项普通而又频繁的劳动,由于css并不是一门语言,所以在程序设计上显得有些简陋.对于小型项目来说,css的量还不至于庞大,问题没有凸显,而如果要开发和持续维护一个较为大型的项目 ...

  8. [API]使用Blueprint来高雅的编写接口文档 前后端api文档,移动端api文档

    网址:http://apiary.io/ 介绍:一款非常强大的前后端交互api设计编辑工具(编辑器采用Markdown类似的描述标记,非常高效),高颜值的api文档,还能生成多种语言的测试代码. 中文 ...

  9. 多线程下的 Lambda表达式 异步 WebClient 读取程序图标,来作为托盘 图标 logo ico

    //读取程序图标,来作为托盘图标this.notifyIcon.Icon = System.Drawing.Icon.ExtractAssociatedIcon(System.Windows.Form ...

  10. css布局课件

    1.什么是CSS盒模型 我们的网页就是通过一个一个盒子组成的. 2.一个盒子拥有的属性:宽和高(width和height).内边距(padding).边框(border).外边距(margin) wi ...