AngularJS 的自定义指令

简介:

这是一篇angularjs自定义指令的教程。就让我们来看看,如何在angularjs中自定义指令吧!我们将利用现有的guitar angularjs app,这在 教程14: AngularJ表单验证 中用到过。你可以在这里下载 之前的app.好吧,现在我们看看angularjs的指令。我们知道:

Angularjs Directives是DOM元素(例如属性,元素名,注释或CSS类)上的标记,它告诉AngularJS的 html 编译器($compile) 把特定的操作连接到DOM元素或转化为DOM元素及其子元素。例如, ng-app 属性是一个指令,因此 ng-controller 及所有的以ng-, ng:, ng_, x-ng-bind, data-ng-bind开头的属性都是。

因此,AngularJS的自定义指令,就是你自己的指令,加上编译器编译DOM时运行的原生核心函数。这可能很难理解。现在,假设我们想在应用中不同页面复用一些特定的代码,而又不复制代码。那么,我们就可以简单地把这段代码放到单独的文件,并调用使用自定义指令的代码,而不是一遍又一遍地敲下来。这样的代码更容易理解。AngularJS中有四种类型的自定义指令:

  • 元素指令
  • 属性指令
  • CSS class 指令
  • 注释指令

在我们现有的app中实现他们之前,我们来看看自定义指令是个什么样子:

元素指令
在html中写下如下的标签,它用来放置代码片段。当我们想使用特定的代码,我们就用上述标签来包含该代码。

<guitar-reviews> ... </guitar-reviews>

在JS文件中,用以下几行代码来使上述angularJS自定义指令生效。

app.directive('guitarReviews', function() {
  return {
    restrict    : 'E',  // used E because of element 
    templateUrl : 'custom-directives/reviews.html'
  };
});

代码解释:

如同app.controller,我们先定义app.directive,然后定义guitarReview,后者是html中用到的元素标签名。但是你注意到没有,guitar-review 和guitarReviews是不同的?这是因为 guitar-reviews的连字符转换到驼峰式大小写,因而在JS文件中就变成了guitarReviews。下一步是正在返回参数的匿名函数。 restrict: ‘E’ 是指我们在定义一个自定义元素指令,而 templateUrl则指向要包含的代码片段文件。

属性指令
在html文件的html标签中敲入如下属性,这个标签用来盛放代码片段。当我们想使用特定代码片段,我们只要敲下这样的标签来包含该代码。

<div guitar-reviews> ... </div>

在JS文件中,用以下代码来使上述angularJS自定义指令生效。

app.directive('guitarReviews', function() {
  return {
    restrict    : 'A', // used A because of attribute 
    templateUrl : 'custom-directives/reviews.html'
  };
});

注意: AngularJS 推荐你用简单的 css 和普通的注释代替自定义指令中的CSS和注释.

现在让我们在app中实现自定义指令吧。你可以在这里下载项目文件。我把reviews部分的代码放到单独的文件,再把该代码片段赋给一个元素,最后在details.html页面中使用.

第一步

在指定的文件夹下新建一个文件夹命名为cDirectives,用来存放自定义的指令。然后,在该文件夹下创建一个reviews.html文件,用于持有用户的reviews。此时,你的文件夹层次结构如下:
image

第二步

在details.html中剪切review部分,并添加标签如下所示:

image

第三步

将你在details.html页面中剪切的代码拷贝至reviews.html如下所示:

<!-- 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 -->

第四步

现在可以在user-reviews标签中添加行为了。让我们打开controller.js,添加如下代码:

GuitarControllers.directive('userReviews', function() {
  return {
    restrict    : 'E',  // used E because of element 
    templateUrl : 'partials/cDirectives/reviews.html'
  };
});

代码解释:

我们的指令在这里变成了userReviews(以camel形式表示)并且连字符不见了。下面我们可以说,当它被调用时加载templateURL中的文件并且对元素E限制该指令。

我们刚刚自定义了一个指令。尽管看起来我们的应用中没有变化,但是现在我们的代码较之前已经进行了很好的规划。你能为描述和规格自定义指令吗?自己尝试一下吧。

有趣的部分:

你可以通过css为你的user-reviews添加样式,就像你对于div层的处理一样。

下载项目文件。

希望你喜欢,并分享我的工作~

相关文章
|
2月前
|
JavaScript
AngularJS中的自定义指令:创建与使用技术详解
【4月更文挑战第27天】本文详细介绍了AngularJS中自定义指令的创建与使用。通过定义指令工厂函数并注册到模块中,可以创建自定义指令,如示例中的`myCustomDirective`。指令的属性(如`restrict`、`template`、`replace`)和方法(如`link`、`scope`)可定制其行为。在HTML中使用`restrict`指定的方式(如元素、属性等)来插入指令。遵循命名规范,避免直接DOM操作,使用隔离作用域和关注重用性与扩展性,能有效提升代码质量。自定义指令是AngularJS强大功能之一,有助于实现复杂DOM操作和组件复用。
|
11月前
|
前端开发 JavaScript 开发者
AngularJS 和 React区别
@[TOC](目录) AngularJS 和 React 是两个目前最为流行的前端框架之一。它们有一些共同点,例如都是基于 JavaScript 的开源框架,都能够帮助开发者构建复杂的单页面应用程序等。但也存在一些不同点,如下所述: # 1. 背景: AngularJS 由 Google 的前雇员 Misko Hevery 开发,并于 2010 年首次发布。它是一个基于 JavaScript 的前端框架,旨在简化应用程序的开发过程。React 由 Facebook 的前雇员 Mark Zuckerberg 开发,并于 2013 年首次发布。它是一个基于 JavaScript 的库,可以用于
118 0
|
前端开发 JavaScript 测试技术
angularjs初识
angularjs初识
58 0
|
JavaScript
AngularJs-03-数据的双向绑定
<!DOCTYPE html> <html lang="zh" ng-app="myapp"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.
1199 0
|
数据安全/隐私保护
|
Web App开发 JavaScript 前端开发