刚开始使用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. 最短路径问题——floyd算法

    floyd算法和之前讲的bellman算法.dijkstra算法最大的不同在于它所处理的终于不再是单源问题了,floyd可以解决任何点到点之间的最短路径问题,个人觉得floyd是最简单最好用的一种算法 ...

  2. CSS3+JS切割轮播图

    以下说明数据,是指有4张图片的轮播图,分别切割成4张. 首先,做成单张切换的立体效果,即通过旋转,确定四张图片的位置,分别是一个立方体的上下前后的图片翻转移动角度. .box ul li:nth-ch ...

  3. Poco C++ MySQl demo

    #include "Poco/Exception.h"#include "Poco/Data/Session.h"#include "Poco/Dat ...

  4. bash获取properties文件资源

    #!/bin/sh prop_value="" function getProperty() { file=$ prop_key=$ prop_value=`cat $file | ...

  5. android之Volley实现瀑布流

    1.首先我们来看下主布局文件activity_main.xml. <RelativeLayout xmlns:android="http://schemas.android.com/a ...

  6. clientX、pageX、scrollLeft、offsetLeft、clientWidth、screen.width的用法和区别

    一.定义和用法 1.event.clientX:事件对象的水平偏移量: event.clientY:事件对象的垂直偏移量: 2.event.pageX:事件对象加上滚动距离后的水平偏移量: event ...

  7. HTTP head 详解 (转)

    HTTP(HyperTextTransferProtocol)是超文本传输协议的缩写,它用于传送WWW方式的数据,关于HTTP协议的详细内 容请参考RFC2616.HTTP协议采用了请求/响应模型.客 ...

  8. Window memcache 使用

    一.memcache配置 1. 下载memcache 32位系统 1.2.5版本:http://static.runoob.com/download/memcached-1.2.5-win32-bin ...

  9. Memcached 数据缓存系统

    Memcached 数据缓存系统 常用命令及使用:http://www.cnblogs.com/wayne173/p/5652034.html Memcached是一个自由开源的,高性能,分布式内存对 ...

  10. [Spring] - Quartz定时任务 - Annotation

    Spring + Quartz可以使用annoation方式: 1.AppJob类: package com.my.quartz.testquartz1; import org.springframe ...