AngularJS (3) 讓網誌顯示angularjs程式碼
有的時候，你可能會讓整篇網誌都在ng-app的範圍內，方便寫出實際體驗的範例。但是當你用<pre>筆記angularJS程式碼的寫法，angularJS卻連<pre>內的{{...}} angular程式碼都一起計算了。為了讓網誌正常顯示angularjs程式碼，可以用ng-non-bindable。
原本
修改後的完整網誌原碼
寫這個也是在我寫了第二篇AngularJS(2)用$filter轉換數值和過濾，因為我想要寫很多小範例，所以乾脆讓整篇網誌都在ng-app的範圍內，結果angularJS真的很「老實」的連<pre>內的{{...}}都算過，害我得把每個<pre>內的加上ng-non-bindable，但有成功顯示就好啦，哈哈！
(連此篇最後的{{...}}都得加上ng-non-bindable才會正常...XD)
<pre class="prettyprint">
<body ng-app="app2">
<div ng-controller="XXX">
{{ 1+2 }}
</div>
</body>
</pre>
這是網誌的原碼
<pre class="prettyprint">
<body ng-app="app2">
<div ng-controller="XXX">
{{1+2}}
</div>
</body>
</pre>
為了確保angularjs不會去計算{{1+2}}，{{1+2}}要改寫成
<span ng-non-bindable>{{1+2}}</span>
修改後的完整網誌原碼
<pre class="prettyprint">
<body ng-app="app2">
<div ng-controller="XXX">
<span ng-non-bindable>{{1+2}}</span>
</div>
</body>
</pre>
完成！
<pre class="prettyprint">
<body ng-app="app2">
<div ng-controller="XXX">
{{1+2}}
</div>
</body>
</pre>
寫這個也是在我寫了第二篇AngularJS(2)用$filter轉換數值和過濾，因為我想要寫很多小範例，所以乾脆讓整篇網誌都在ng-app的範圍內，結果angularJS真的很「老實」的連<pre>內的{{...}}都算過，害我得把每個<pre>內的加上ng-non-bindable，但有成功顯示就好啦，哈哈！
(連此篇最後的{{...}}都得加上ng-non-bindable才會正常...XD)
留言
張貼留言