国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-a级毛片无码免费真人-a级毛片毛片免费观看久潮喷

您的位置:首頁技術文章
文章詳情頁

angular.js - angular中可以在ng-click中直接調用service的方法嗎?

瀏覽:124日期:2024-09-15 18:15:00

問題描述

代碼如下:

<!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,即視圖層與模型層的橋梁。先看一下下圖:angular.js - angular中可以在ng-click中直接調用service的方法嗎?可以看出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

相關文章:
主站蜘蛛池模板: 亚洲精品欧美精品一区二区 | 欧美特黄aaaaaaaa大片 | 亚洲欧美视频一级 | 日本精品久久久久久久久免费 | 成人欧美一区二区三区黑人免费 | 在线精品视频免费观看 | 国产精品毛片 | 成人三级在线视频 | 韩国一级永久免费观看网址 | 中文字幕亚洲欧美 | 国产三级精品三级 | 日韩中文在线观看 | 男人操美女网站 | 男人精品一线视频在线观看 | 毛片免费看网站 | 美国毛片亚洲社区在线观看 | 国产精品嘿咻嘿咻在线播放 | 国产深夜福利视频观看 | 91一区| 日韩免费三级 | 波多野结衣在线免费视频 | 久久精品视频免费 | 特黄特a级特别特级特毛片 特黄特黄 | 在线观看亚洲网站 | 一级做a爰片性色毛片视频图片 | 国产玖玖在线观看 | 91小视频在线观看免费版高清 | 国产成人亚洲精品一区二区在线看 | 欧美一级看片 | 国产美女拍拍拍在线观看 | 精品热99 | 亚洲成人在线免费 | 免费特黄一级欧美大片在线看 | 欧美三级欧美成人高清www | 午夜爱爱毛片xxxx视频免费看 | 国产亚洲精品久久 | 全部aⅴ极品视觉盛宴精品 全部免费a级毛片 | 国内精品91最新在线观看 | 成人午夜爽爽爽免费视频 | 日韩黄色片在线观看 | 全部免费毛片在线 |