AngularJS – Directive 介紹篇
接續前面提到的關於產品展示頁面的製作，我們在HTML文件上面加入一個Add to Cart的按鈕，但是希望這個按鈕可以有條件性的顯示或隱藏，我們可以在該按鈕的HTML標籤中加入ng-show=”store.product.canPurchase”的屬性，這個屬性會去判斷在gem數列中canPurchase中的值是否為true，若不是則該按鈕不顯示於畫面上，反之則會顯示加入購物車（Add to Cart）的按鈕。
在這個案例中canPurchase就算是在數列中的顯示參數，其實這個參數並不是一定要叫canPurchase這個名稱，可以自行決定名稱，例如在馬老師製作的案例中，我就是利用buttonShow這樣的參數名稱，大家也可以在JS Bin上面看看這個案例的程式碼。
<!DOCTYPE html>
<html ng-app="store">
<head>
<meta name="description" content="AngularJS directivesExample 1">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>AngularJS directivesExample 1</title>
</head>
<body>
<div ng-controller="StoreController as store">
<h1>{{ store.product.name }}</h1>
<h2>NT${{ store.product.price }}</h2>
<p>{{ store.product.description }}</p>
<button ng-show="store.product.buttonShow">加入購物車</button>
</div>
</body>
</html>
(function(){
var app = angular.module('store',[]);
app.controller('StoreController',function(){
this.product = item;
});
var item = {
name:"馬老師雲端研究室 滑鼠墊",
price:"350",
description:"有些人認為滑鼠墊就只是種簡單的產品。無非是將滑鼠放於上方並將之滑來拖去。 “表面”上來說確實如此（一語雙關）。但實際上，製造能帶來卓越遊戲體驗的滑鼠墊卻需要結合眾多科學、技術和工藝。身為遊戲滑鼠技術的世界領先者，對如何使滑鼠感測器高效運作我們獨樹一幟。運用專門知識來製造適合的滑鼠墊表面，讓滑鼠感測器得以作出高效而精確的反應。",
buttonShow: false
};
})();
另外還有一種資料顯示的手法，我們可以在gem數列中另外加入soldOut這個參數，而在div的HTML標籤中加入ng-show=”!store.product.soldOut”這樣的屬性，其中驚嘆號指的是不等於，所以這個屬性的意思即是當soldOut參數不等於true的時候要隱藏該div，也就是會隱藏所有的商品資訊。
不過這樣的表達方式並不是很直接，必須要做邏輯上的轉換，因為條件式是soldOut不等於true就顯示該商品，不是很容易搞懂，所以同樣的案例我們可以把HTML中的標籤的屬性改成ng-hide=”store.product.soldOut”，這樣一來我們只需要去看soldOut參數中的值是true或是false，如果賣完就不顯示；沒賣完就顯示，這是一個比較直覺的方法，透過JS Bin觀賞本案例的原始碼。
接下來看多項商品的製作方式，首先必須了解如何在Javascript的數列中加入多項商品的資料。
輸入了以上數列的資料後，在HTML的頁面上可以依下圖的方式呈現出多重商品的資訊，不過從以下的呈現方式可以看的出來，如果商品數量不僅僅是只有兩項，那頁面上面的HTML標籤就會過於複雜，所以下面的方法僅僅是讓大家了解邏輯的部分。
實際上呈現的方式可以參考下圖，是不是簡單多了，在JS Bin上面觀看。
接下來幫大家整理目前講解到的一些AngularJS的專有名稱說明：
- Directives（指示） – 在HTML中觸發Javascript行為的參數。
- Modules（模組） – 定義我們的應用程式。
- Controllers（控制器） – 定義我們應用程式該如運作。
- Expressions（表達式） – 我們的資料該如何的顯示在頁面上。
※以上截圖部分為AngularJS官方教學視訊，另有directive指令介紹的專頁。
Just want to say what a great blog you got here!I’ve been around for quite a lot of time, but finally decided to show my appreciation of your work!
zofran sale – buy valacyclovir 500mg generic buy valacyclovir 500mg without prescription
Thank you so much for sharing this wonderful post with us.
Great blog here! Additionally your website rather a lot up very fast! What host are you the usage of? Can I get your associate link for your host? I desire my website loaded up as fast as yours lol
We worked out way down the staircase, but realized that in order to have a clean edge at the basement floor, we needed to start working up from the bottom. Remember that the basement stairwell is part of the overall design of the finished basement and should blend seamlessly with the rest of the decor. We worked out way down the staircase, but realized that in order to have a clean edge at the basement floor, we needed to start working up from the bottom. The depth of your basement will determine how many stairs will need to be installed. Naturally, the more stairs to be installed, the higher the installation cost will be. Also, if you plan to install curved stairs, spindle, floating, or L-shaped, you can expect the cost of the installation to increase. These steps will take more time to build than straight steps, and they can increase your installation cost anywhere from $800 to over $3,000. https://astro-wiki.win/index.php/Best_kitchen_upgrades_for_resale Pre-Existing kitchen Picture For example, if you plan to serve snacks or use this space for wine sessions, leave proper legroom and surface area for each person. About 24 inches of width might be enough for each person. Consider leaving 9 to 13 inches of clearance between your knees and the bottom of the counter for the necessary legroom. While designing, match the counter height with the seating you use. Customizing your island can make it more user-friendly and diverse without adding costs, For example, if your kitchen island also doubles as a workspace, consider adding electrical outlets to make sure people can charge their phones or plug in a speaker. There a number of kitchen island ideas that can get you moving. Once the vision was framed in detail, the work could get started. They started by taking down the wall, which created a sizable 15 1 2 island that has room for 8. The new kitchen also added almost 14′ for floor to ceiling pantries for storage.
The scope of work for your bathroom remodel project may either be a minor renovation or a major renovation. This will also determine the type of professional you need and the amount of labor cost in the project. A minor renovation includes simple work such as repainting walls, replacing or fixing bathroom faucets, tiling a part of the bathroom, regrouting, installing a knock-down shelf or storage unit and installing accessories. This location is nestled right outside of midtown. Close enough to be able to visit all the new shops and restaurants, but far away enough to have a little peace and quiet. I loved getting to work on this house with my dad and renovate it to become more functional! One of my favorite projects of the house was this small bathroom remodel! If you’re searching for cool DIY bathroom remodel ideas, follow this tutorial to upcycle an old dresser as a bathroom vanity. Converting a vintage dresser into a vanity gives life to old furniture and saves you money on buying new cabinets to install. https://gameusedcards.com/community/profile/rosemarymccurry/ Each bathroom renovation project in Delaware looks different based on a variety of factors, including the size of the space, whether you are changing the entire design style, what features or bathroom components you’re adding, and the materials you select. Although bathroom remodel labor costs don’t fluctuate significantly within a regional market, your price for a contractor may also vary slightly depending on what services are included. Here is a look at the average bathroom remodel cost at three different levels: A bathroom remodel can be both time and energy consuming apart from the fact the costs might differ depending on your fixtures, bathroom layout, and size too. Therefore, it is better to plan before going all in and understand the bathroom remodel costs beforehand. But that doesn’t mean they’re always easy. Or cheap. The costs of bathroom renovations can be unpredictable — especially depending on the size of the room. Additionally, the price of materials and fixtures for bathroom remodels can vary greatly, and failing to properly budget for plumbing and contractor expenses can lead to unexpected cost overruns.
Thanks , I’ve recently been searching for info about this topic for ages and yours is the best I have discovered so far. But, what concerning the bottom line? Are you certain concerning the source?
Great post. Just a heads up – I am running Ubuntu with the beta of Firefox and the navigation of your blog is kind of broken for me.
How long does it take you to write an article like this?
Unquestionably believe that which you said. Your favorite reason seemed to be on the net the easiest thing to be aware of. I say to you, I certainly get annoyed while people consider worries that they plainly don’t know about. You managed to hit the nail on the head. Will probably be back to get more. Thanks
A good web site with interesting content, that’s what I need. Thank you for making this web site, and I will be visiting again. Do you do newsletters? I Can’t find it.
free rdp account
order tadalafil 10mg generic – cialis for sale online order generic flomax
I dont think I’ve read anything like this before. So good to find somebody with some original thoughts on this subject. cheers for starting this up. This blog is something that is needed on the web, someone with a little originality.
Well done! Keep up this quality!
Peculiar this blog is totaly unrelated to what I was searching for – – interesting to see you’re well indexed in the search engines.
I have been exploring for a little for any high quality articles or blog posts on this kind of area . Exploring in Yahoo I at last stumbled upon this web site. Reading this info So i am happy to convey that I’ve an incredibly good uncanny feeling I discovered just what I needed. I most certainly will make sure to do not forget this website and give it a look on a constant basis.
I’m partial to blogs and i actually respect your content. The article has actually peaks my interest. I am going to bookmark your site and preserve checking for new information.
order levofloxacin generic – real viagra goodrx cialis
Thanks For This Blog, was added to my bookmarks.
The other day, while I was at work, my cousin stole my iphone and tested to see if it can survive a 30 foot drop, just so she can be a youtube sensation. My iPad is now destroyed and she has 83 views. I know this is entirely off topic but I had to share it with someone!
Very nice post. I just stumbled upon your blog and wanted to say that I’ve really enjoyed browsing your blog posts. In any case I’ll be subscribing to your rss feed and I hope you write again soon!
A good web site with interesting content, that’s what I need. Thank you for making this web site, and I will be visiting again. Do you do newsletters? I Can’t find it.
I like to spend my free time by scanning various internet resources. Today I came across your website and I found it has some of the most practical and helpful information I’ve seen.
cozaar uk – order losartan without prescription order promethazine 25mg pills
clopidogrel us – methotrexate 5mg usa metoclopramide without prescription
Thank you for sharing this very good post. Very interesting ideas! (as always, btw)
Nice blog. Could someone with little experience do it, and add updates without messing it up? Good information on here, very informative.
Hi there! I just wanted to ask if you ever have any trouble with hackers? My last blog (wordpress) was hacked and I ended up losing several weeks of hard work due to no back up. Do you have any solutions to protect against hackers?
flexeril pills – generic gloperba buy inderal 20mg generic