【AngularJS】深入讲解AngularJS中的自定义指令的使用

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【深入讲解AngularJS中的自定义指令的使用】，下面是详细的讲解！

深入讲解AngularJS中的自定义指令的使用

<!-- Review Tab START, it has a new controller -->
<div ng-show="panel.isSelected(3)" class="reviewContainer" ng-controller="ReviewController as reviewCtrl" >
 
<!-- User Reviews on each guitar from data.json - simple iterating through guitars list -->
<div class="longDescription uReview" ng-repeat="review in guitarVariable[whichGuitar].reviews"> 
  <h3>Review Points: {{review.star}} </h3>
  <p> {{review.body}} ~{{review.name}} on <date>{{review.createdOn | date:'MM/yy'}} </p>
</div><!-- End User Reviews -->
 
<!-- This is showing new review preview-->
<div ng-show="add===1" class="longDescription uReview" > 
  <h3>Review Points: {{reviewCtrl.review.star}} <span ng-click="add=0">X</span></h3>
  <p> {{reviewCtrl.review.body}} ~ {{reviewCtrl.review.name}} </p>
</div>
 
<!-- Add new Review to specific guitar - click this link to show review adding pannel -->
<a href ng-click="add=1" class="addReviewLink">Add review</a>  
 
<!-- form validates here using form name and .$valid and on submission we are going to addReview function with guitarID -->
<form class="reviewForm" name="reviewForm" ng-submit="reviewForm.$valid && reviewCtrl.addReview(guitarVariable.indexOf(guitarVariable[whichGuitar]))" novalidate ng-show="add===1" >
  <div>
    Review Points: 
    <!-- ng-option here is setting options, cool? -->
    <select ng-model="reviewCtrl.review.star" ng-options="point for point in [5,4,3,2,1]" required >    
    </select>
    Email: 
    <input type="email" ng-model="reviewCtrl.review.name" required>
    <button type="submit">Submit</button>
    </div>
    <textarea placeholder="Enter your experience with this guitar..." ng-model="reviewCtrl.review.body"></textarea>
</form><!-- END add new review -->
</div><br /><!-- END Review Tab -->

关于深入讲解AngularJS中的自定义指令的使用的用户互动如下：

　　相关问题：为什么使用AngularJS 指令

　　答：使用过 AngularJS 的朋友应该最感兴趣的是它的指令。现今市场上的前端框架也只有AngularJS 拥有自定义指令的功能，并且AngularJS 是目前唯一提供Web应用可复用能力的框架。 目前有很多JavaScript. 产品提供插件给Web开发人员。例如， Bootstrap ... >>详细

　　相关问题：如何在AngularJS指令中创建controller与ngModel进...

　　答：在本文中，我们将一步一步学着创建一个用来输入时间值的指令。我们的目标是能够将一个普通的文本输入字段变成一个能够以HH:mm格式显示时间的时间选择器，但是将它以毫秒为单位存储在我们的数据属性中。 对于这个例子，我们的HTML非常简单，如下... >>详细

　　相关问题：AngularJS的指令 compile和link的区别及使用示例

　　答：区别： angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-link了. ... >>详细