刚开始使用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. MMDrawerController在表视图和导航栏中的使用

    1.如果不在APPDelegate引入MMDrawerController框架,那么就要注意在需要点击的视图控制器中的对象的获取. //工程中标签视图控制器 MainTabBarViewControl ...

  2. TYVJ 1117 BFS

    无限WA..参考了一下题解和同学写的....... 可以在bfs的基础上改一下.. 读入的时候平地权值是2 草地是0 bfs的时候如果搜到的是平地,那么直接加入,如果搜到的是草地,那么记录是草地. 从 ...

  3. css中的背景、边框、补丁相关属性

    css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

  4. jsp按钮隐藏自动点击

    <%@ page language="java" import="java.util.*" pageEncoding="big5"%& ...

  5. redis主从配置

    首先安装redis 我的redis安装在/app/redis/文件夹下 第二步,写两个redis实例的配置文件,一主一从.我的设计如下,6379端口为主,6380端口为从. 6379:redis_ma ...

  6. VS安装部署

    Windows Installer 部署要求管理员权限并且只允许受限制的用户安装;而 ClickOnce 部署允许非管理用户安装应用程序并仅授予应用程序所需要的那些代码访问安全权限.

  7. nginx文件目录权限设置

    1.有时我们web服务器上的某个文件夹只允许特定人员访问,这时我们需要在nginx配置文件中配置该文件夹的访问权限. 2.生成用户名单在nginx中我们使用htpasswd来生成用户名单下载这个pyt ...

  8. 转义字符(\)对JavaScript中JSON.parse的影响概述

    JSON是一个提供了stringify和parse方法的内置对象,前者用于将js对象转化为符合json标准的字符串,后者将符合json标准的字符串转化为js对象,本文为大家介绍下转义字符对JSON.p ...

  9. [原] wmic: Invalid XSL format (or) file name错误解决方法

    之前运行wmic命令正确,今天在服务器上出现Invalid XSL format (or) file name的提示,搜索了一下,在这里找到了答案: http://www.ctkn.net/2011/ ...

  10. 安装oracle数据库,登录 时无法连接目标机

    oracle11g 在dos命令里输入输入sqlplus 输入如用户名: 输入口令: 还是无法连接 解决办法: 输入sqlplus/nolog按enter键再输入conn/as sysdba就好了