Angularjs中scope与rootscope区别及联系 及 JS实现时间选择插件

举报
SHQ5785 发表于 2023/05/09 08:42:52 2023/05/09
【摘要】       scope是html和单个controller之间的桥梁,数据绑定就靠他了。rootscope是各个controller中scope的桥梁。用rootscope定义的值,可以在各个controller中使用。下面用实例详细的说明一下。1.js代码phonecatApp.controller('TestCtrl',['$scope','$rootScope', funct...

      scope是html和单个controller之间的桥梁,数据绑定就靠他了。rootscope是各个controller中scope的桥梁。用rootscope定义的值,可以在各个controller中使用。下面用实例详细的说明一下。

1.js代码

phonecatApp.controller('TestCtrl',['$scope','$rootScope',  
    function($scope,$rootScope) {  
        $rootScope.name = 'this is test';  
    }  
]);  
phonecatApp.controller('Test111Ctrl',['$scope','$rootScope',  
    function($scope,$rootScope) {  
        $scope.name = $rootScope.name;  
    }  
]);

2.html代码

<div ng-controller="TestCtrl">  
    I  set the global variable.<strong>{{$root.name}}</strong>  
</div>  
<div ng-controller="Test111Ctrl">  
    1,get global variable .<strong>{{name}}</strong><br>  
    2,get global variable .<strong>{{$root.name}}</strong>  
</div>

3.显示结果

I set the global variable.this is test  

1,get global variable .this is test  

2,get global variable .this is test  

      由结果可以看出来,$rootScope.name设置的变量,在所有controller里面都是可以直接用{{$root.name}}来显示的,很强大。那当然也可以赋值给scope.

JS实现时间选择插件

引导语

      在项目开发过程中,需要实现根据以日期为筛选条件之一,故需要实现时间选择插件。对于未接触的新事物,自己总是感觉不明觉厉。其实,有些实现可以使用很简单的方法即可。以此为例,偶然的一次翻看课本发现HTML5中已经设计到此种实现。其中,设置input元素的type属性为datetime-local即可实现。

问题

     实际编码过程中,还是出现了问题。$scope.bill_dateBegin并不能获取到时间选择框中的设置值。

原因

     AngularJS support the input type datetime-local since version 1.3.0-beta.1

     原来AngularJS 1.3.0-beta.1 极其之上的版本才支持datetime-local的绑定,那就是自己的版本太低导致的了。经过查看版本,发现自己的版本为1.3.0.14,应该不低啊。但实验证明,还是自己的版本过低导致的。尝试使用高版本。

解决方法

     尝试使用高版本。但使用1.5.0版本还是没效果!

     经过一番询问,还是未能够解决问题。自己尝试着试试type的其它时间类型,当自己使用date类型,发现居然绑定上了,我就呵呵了....而其它的类型例如datetime、datetime-local却无法绑定,费解。我只能说angular还是不够强大!

       

     不过问题还是来了。当自己使用如下语句时,确弹出了下图的信息,而我们则需要这样的格式:2015-12-24 12:00:00。明显日期格式需要进行转换。

     bill_dateEnd = $scope.bill_dateEnd; 

     alert(bill_dateEnd);

      


      有关日期时间的转换问题详见博文JS抽离公共函数》。

感触

自己的知识面还是比较窄,还是需要多读书《疯狂HTML 5/CSS 3/JavaScript讲义》。

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。