AngularJS自定义指令教程–第1部分

AngularJS provides several directives to manipulate the DOM’s behavior. Earlier we looked at some of the built in directives like ng-app, ng-controller, ng-repeat etc. You can check out the official angular API documentation for more directives.  Although angular provides many built in directives, sometimes we will face some scenarios in which we need to write our own directive to achieve a specific task.  In this series of tutorials, we will guide you to write a good Angular directive.

AngularJS提供了一些指令来操纵DOM的行为。 之前我们看过一些内置指令，例如ng-app，ng-controller，ng-repeat等。您可以查看官方的angular API文档以获取更多指令。 尽管angular提供了许多内置指令，但有时我们会遇到一些需要编写自己的指令以实现特定任务的场景。 在这一系列教程中，我们将指导您编写一个好的Angular指令。

In AngularJS Custom Directives Tutorial – Part 1, we will start with a simple example to create a directive.

在AngularJS自定义指令教程–第1部分中，我们将从一个简单的示例开始创建指令。

创建指令 (Creating Directives)

We use module.directive API to register our directive. You must make sure not to prefix your directive with ng since it may conflict with other built in directives.

我们使用module . directive module . directive API来注册我们的指令。 您必须确保不要在指令前加上ng前缀，因为它可能与其他内置指令冲突。

In this post, we will create a template-expanding directive. Sometimes we have to use the same template in multiple locations in our applications. We can use a custom directive to simplify the use of these common directives. That makes the code more manageable.

在本文中，我们将创建一个模板扩展指令。 有时，我们必须在应用程序的多个位置使用同一模板。 我们可以使用自定义指令来简化这些通用指令的使用。 这使得代码更易于管理。

The following example demonstrates the usage of module’s directive API to create our directive. In this example,we use directive’s template property to create a directive called myEmployee.

以下示例演示了如何使用模块的指令API创建指令。 在此示例中，我们使用指令的template属性创建名为myEmployee的指令。

app.js

app.js

var app = angular.module('mainApp', []);

 app.controller('EmployeeCtrl', function($scope) {
  $scope.employee = {
    role: 'Software Developer',skill:'Angular JS'
  };
});

app.directive('myEmployee', function() {
  return {
    template: 'Role: {{employee.role}} - Skill: {{employee.skill}}'
  };
});

Following code demonstrates how to use our myEmployee directive.

以下代码演示了如何使用我们的myEmployee指令。

index.html

index.html

You will see the following output in your browser.

您将在浏览器中看到以下输出。

The template attribute defines the content that should be the output from the directive. We can include HTML, data binding expressions, and even other directives.
Unless the template is too small, it’s always better to break it apart into its own HTML file and load it with the templateUrl option.

template属性定义应作为指令输出的内容。 我们可以包括HTML，数据绑定表达式，甚至其他指令。
除非模板太小，否则最好将其分解成自己HTML文件并使用templateUrl选项加​​载。

We will modify the above example to demonstrate the usage of templateUrl option property of the directive.

我们将修改上面的示例，以演示指令的templateUrl选项属性的用法。

app.js

app.js

var app = angular.module('mainApp', []);

 app.controller('EmployeeCtrl', function($scope) {
  $scope.employee = {
    role: 'Software Developer',skill:'Angular JS'
  };
});

app.directive('myEmployee', function() {
  return {
    templateUrl: 'my-employee.html'
  };
});

There isn’t any change in the index.html file.

index.html文件没有任何更改。

index.html

index.html

The my-employee.html file contains the contents of the template used by the directive.

my-employee.html文件包含该指令使用的模板的内容。

my-employee.html

my-employee.html

Role: {{employee.role}} - Skill: {{employee.skill}}

You will see the same output in this case as well.

在这种情况下，您也会看到相同的输出。

That’s all for now and We will cover all the topics related to custom directives in the following posts.

到此为止，我们将在后续文章中介绍与自定义指令相关的所有主题。

翻译自: https://www.journaldev.com/6890/angularjs-custom-directives-tutorial-part-1