AngularJS에서 데이터를 공유하는 서비스의 병아리 (CoffeeScript 버전)
2151 단어 AngularCoffeeScript
라는 2,3일 전의 나 같은 미지근한 엔지니어를 위해서. 츳코 볼거리 다수라고 생각됩니다만, 다시 움직입니다!
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="hoge.js"></script>
</head>
<body>
<div ng-controller="AbcCtrl">
AbcCtrl :<input ng-model="data_a.number">
<button ng-click="reset()">reset</button>
</div>
<div ng-controller="XyzCtrl">
XyzCtrl :<input ng-model='hoge.get_data().number'>
<button ng-click="hoge.double()">double</button>
</div>
</body>
</html>
hoge.js
(->
angular.module('myApp', [])
)()
(->
HogeService = () ->
# このserviceを使って共有するprivate data
data = {
number: 2 # 初期データをここで設定してもいいし
ary: []
obj: {}
}
# private method的なナニか
init = () ->
data.number = 123
# constructor的なナニか
data.ary = [1, 2, 3] # ここで初期化するのもあり
init()
# public method的な人達
get_data: -> # ゲッター
data
double: ->
data.number = data.number * 2
reset: ->
init()
angular.module('myApp')
.service 'HogeService', HogeService
)()
(->
angular.module('myApp')
.controller 'AbcCtrl', ($scope, HogeService) ->
$scope.data_a = HogeService.get_data()
$scope.reset = HogeService.reset
.controller 'XyzCtrl', ($scope, HogeService) ->
$scope.hoge = HogeService # この方式でもいける
)()
※ hoge.js는 복수 파일로 분할되는 것을 상정해 쓰고 있습니다
제대로 양방향 데이터 바인딩됩니다.
Reference
이 문제에 관하여(AngularJS에서 데이터를 공유하는 서비스의 병아리 (CoffeeScript 버전)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kabaken/items/fe6a0098a1e21c10c7bc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
