angular.js - angular中可以在ng-click中直接调用service的方法吗？
问题描述
代码如下：
<!DOCTYPE html><html ng-app='myapp'><head> <meta charset='UTF-8'> <title>Angular学习</title></head><body><section ng-controller='Ctrl1 as ctrl1'><input type='text' ng-model='ctrl1.a'/><!-- 这里可以直接写服务方法的调用吗？原来的是ctrl1.setA() --><input type='button' value='设置' ng-click='MathService.setA(ctrl1.a)'> </section> <section ng-controller='Ctrl2 as ctrl2'><h1>{{ctrl2.getA()}}</h1> </section><script type='text/javascript'>var myapp = angular.module('myapp',[]);myapp.controller('Ctrl1',['MathService',function(MathService){ this.set = function(){return MathService.setA(this.a); }}]);myapp.controller('Ctrl2',['MathService',function(MathService){ this.getA = function(){return MathService.getA(); }}]);myapp.service('MathService',[function(){ var a = 999; this.getA = function(){return a; } this.setA = function(number){a = number; }}]); </script></body></html>
也就是说我不想用控制器的定义一个方法返回，而直接调用service里面的方法，可我试了不起作用，这是为什么呢？
问题解答
回答1：
首先$scope是ViewModel，即视图层与模型层的桥梁。先看一下下图：
可以看出Ctrl1 as ctrl1语法，实际上是在$scope对象上新增一个ctrl1的属性，而属性值是一个包含setA和a属性的对象。在创建Ctrl1的时候，我们只添加了setA属性。为什么会有一个a属性呢？因为你使用了ng-model指令(实现双向绑定)，当input输入框改变时，发现ctrl1对象中没有a属性(绑定值是原始数据类型哈)，那么它会自动创建一个。上面示例中Ctrl1的调整后的代码如下：
myapp.controller('Ctrl1',['MathService',function(MathService){ this.setA = MathService.setA;}]);
模板中直接使用的service的话，可以把service添加到$rootScope对象上：
var myapp = angular.module('myapp',[]).run(['$rootScope', 'MathService', function($rootScope, MathService) { return $rootScope.mathService = MathService;}]);
个人不推荐这样使用，如果使用这样方法，最好加个命名空间。
另外使用ng-model进行数据绑定时，推荐使用如下方式:
1.更新后模板
<section ng-controller='Ctrl1 as ctrl1'> <input type='text' ng-model='ctrl1.obj.a'/> <!-- ctrl1.obj.a 这个值推荐在Ctrl中直接获取 --> <input type='button' value='设置' ng-click='ctrl1.setA(ctrl1.obj.a)'></section>
2.更新后Ctrl1
myapp.controller('Ctrl1',['MathService',function(MathService){ this.setA = MathService.setA; thi.obj = {};}]);
友情提示(已知的请略过):1.截图中使用的调试工具是Chrome插件 - AngularJS2.示例中使用Angular stict DI，是推荐的做法。但如果嫌麻烦的话，可以参考使用gulp-ng-annotate
相关文章：
1. flexbox - css3[flex-shrink]属性在子项有 padding/box-sizing 属性时，是如何计算子项宽度的?2. 【python小白】 问关于property的顺序问题3. 9.png中在同一方向上设置多个拉伸位置，在android studio中怎么弄出来？4. angular.js - angular1如何使用跨域后的得到的数据5. angular.js - 如何在指令里使用ng-click6. android-studio - Android Studio 中有没有类似C#的#if DEBUG功能7. angular.js input输入正确数据框变红色8. JS怎么给每相隔一行的TD添加filter滤镜？9. angular.js - Angular 像这种重复判断的表达式 有什么好的解决办法吗？~10. android-studio - android studio自带模拟器中的本地“图库”所对应的路径是什么？
网公网安备