###質問内容
monacaを用いて、OnsenUI + AngularJSでモバイルアプリの開発を行っています。
動いてはいるのですが、疑問点があり質問させて頂きます。
下記コードのJavaScriptの5行目、「splitter.left.toggle();」が正常に動いている理由が分かりません。
「splitter」は一番上のHTMLのons-splitterの名称として定義しているものですが、
通常JavaScriptからHTMLの操作をするにはDOMを使用(document.getElementByIdなど)するか、
AngularJSでも$scopeを使用する必要があると認識しています。
ですが、下記コードは特に注釈付けをすることなく、「splitter」がJavaScriptから操作できています。
これは何故でしょうか?
私が認識できていないOnsenUIやAngularJS、JavaScriptの仕様があるのでしょうか。
どなたか下記コードが正常に動く理由をご教示いただけませんでしょうか
###該当のソースコード(一部抜粋の形です)
HTML
1<ons-splitter var="splitter"> 2 <ons-splitter-side page="sidemenu.html" side="left" width="220px" collapse swipeable> 3 </ons-splitter-side> 4 <ons-splitter-content page="paylist.html"></ons-splitter-content> 5</ons-splitter>
HTML
1 <ons-page> 2 <ons-toolbar ng-controller="ToolbarController as ToolbarC"> 3 <div class="left"> 4 <ons-toolbar-button ng-click="ToolbarC.toggle()"> 5 <ons-icon icon="ion-navicon" style="font-size:32px; width:1rem;"></ons-icon> 6 </ons-toolbar-button> 7 </div> 8 <div class="center"> 9 ツールバー 10 </div> 11 <div class="right"> 12 <div class="toolbar-namebox"> 13 <br /> 14 userid<br /> 15 username 16 </div> 17 </div> 18 </ons-toolbar> 19</ons-page>
javascript
1angular.module(MyApp) 2 3.controller('ToolbarController', function() { 4 this.toggle = function() { 5 splitter.left.toggle(); 6 }; 7});
###補足情報
アプリを開発するにあたってテンプレートとしたコードがあり、
元々はsplitterの前に「$scope」があったのですが、
個人的に$scopeはあまり利用したくなく、
ためしに外してみたところ正常に動いて驚きました。
ただ、調べてもその理由が分からない、という経緯があります。
上記コードは開発中のコードから一部抜粋したものです。
過不足ないとの認識ですが、もし不足情報があれば提供いたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/26 09:57