angularjs-directiveangularjs-directive入门


备注

AngularJS指令是HTML中的自定义元素(例如属性,元素名称,注释或CSS类),它们告诉AngularJS将指定的行为附加到该DOM元素,甚至转换DOM元素及其子元素。简而言之,当我们创建一个指令时,AngularJS将以不同的方式处理该元素。

构建可重用的组件

指令可用于构建可重用的组件。以下是“用户Box”组件的示例:

userBox.js

angular.module('simpleDirective', []).directive('userBox', function() {
  return {
    scope: {
        username: '=username',
        reputation: '=reputation'
    },
    templateUrl: '/path/to/app/directives/user-box.html'
  };
});
 

Controller.js

var myApp = angular.module('myApp', ['simpleDirective']);

myApp.controller('Controller', function($scope) {
    $scope.user = "John Doe";
    $scope.rep = 1250;
});
 

myPage.js

<html lang="en" ng-app="myApp">
  <head>
    <script src="/path/to/app/angular.min.js"></script>
    <script src="/path/to/app/controllers/Controller.js"></script>
    <script src="/path/to/app/directives/userBox.js"></script>
  </head>

  <body>
  
    <div ng-controller="Controller">
        <user-box username="user" reputation="rep"></user-box>
    </div>
    
  </body>
</html>
 

用户box.html

<div>{{username}}</div>
<div>{{reputation}} reputation</div>
 

安装或设置

指令附带AngularJS库本身。示例指令可以创建为:

angular.module('simpleDirective', [])
.directive('helloData', function() {
  return {
    template: 'Hello, {{data}}'
  };
});
 

并可用作:

JS:

angular.module('app', ['simpleDirective'])
.controller('Controller', ['$scope', function($scope) {
  $scope.data = 'World';
}])
 

HTML

<div ng-controller="Controller">
  <div hello-data></div>
</div>
 

将编译为:

你好,世界

使用简单链接功能的成功/错误弹出消息

链接函数是自定义指令中操作DOM的最佳方式。它按顺序将三个属性作为输入(范围,元素,属性)

scope:其指令的本地范围对象。

element:使用指令的html元素。

attribute:它允许访问元素引用中使用的所有属性。

// on success call or similarly error, warning, info in controller
    $scope.message={
                text: "Saved Successfully",
                type: "SUCCESS"
                };    
                
    <user-info msg="message"> </user-info>   //in html



    var mainApp = angular.module("mainApp", []);
     mainApp.directive('userInfo', function() {
        var directive = {};
        directive.restrict = 'E';
        
        directive.scope = {
           message : "=msg"
        },
        
        directive.link = function(scope, element, attributes) {
            if(scope.message.type==='SUCCESS')
              scope.message.text = 'SUCCESS: '+scope.message.text+' !';
            else if(scope.message.type==='ERROR')  
              scope.message.text = 'ERROR: '+scope.message.text+' !';
            else if(scope.message.type==='WARNING')  
              scope.message.text = 'WARNING: '+scope.message.text+' !'
            else if(scope.message.type==='INFO')  
              scope.message.text = 'INFO: '+scope.message.text+' !'
          
            element.on('click', function(event) {     //on click of div pop-up will smoothly close
                      $(this).fadeOut();   
                      });
           },
           directive.template = '<div ng-class={{message.type}}>'+            // one can create different bg-color as per type of message and width/height
                                '<div class="message-text">{{message.text}}<div>'+   //message text will be printed
                                '<div>';
           
        return directive;
     });
 

你的第一个指令

我们的第一个元素指令不会做太多:它只会计算2+2 并将在html中调用,如下所示:

<my-calculator></my-calculator>
 

请注意,该指令的名称是myCalculator (在CamelCase中),但在html中它用作my-calculator (在lisp-case中)。

由于我们希望将指令用作html元素,因此我们将使用restrict: 'E'

每个指令都有一个将被编译和插入的模板。我们的指令非常简单,因此我们将html作为字符串插入到template 参数中。

// directives/my-calculator.js

angular.module('exampleApp', [])
.directive('myCalculator', function() {
  return {
    restrict: 'E',
    template: '<span> My directive can calculate 2+2: {{2+2}} </span>'
  };
});
 

HTML

<!DOCTYPE html>
<html ng-app="exampleApp">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="my-calculator.js"></script>
  </head>

  <body>
    Here is my first directive: 
    <my-calculator></my-calculator>
  </body>

</html>
 

结果将如下所示:

这是我的第一个指令:我的指令可以计算2 + 2:4

如果您想玩实时示例,请访问plunkr