www.qjdy.com-奇迹赌场 > www.qjdy.com > 自定义指令使用的

原标题:自定义指令使用的

浏览次数:173 时间:2019-07-18

 自定义指令中接纳AngularJS扩张HTML的功用。自定义指令使用的“指令”的职能定义。自定义指令只是交替了它被激活的因素。携带进度中AngularJS应用程序找到了合作的因素,并搞好利用自定义指令compile()方法壹次活动再管理利用基于指令的限定自定义指令link()方法的因素。 AngularJS提供协助,以下列成分的体系来创立自定义指令。

  •     Element directives - 指令遭逢时激活三个匹配的要素。
  •     Attribute - - 指令蒙受时激活三个佳人才子的天性。
  •     CSS - - 指令境遇时激活相配CSS样式。
  •     Comment - - 指令遇到时激活相称的注释。

询问自定义指令

概念自定义的HTML标签。

<student name="Mahesh"></student><br/>
<student name="Piyush"></student>

概念自定义指令来管理地点的自定义HTML标签。

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

//Create a directive, first parameter is the html element to be attached.  
//We are attaching student html tag. 
//This directive will be activated as soon as any student element is encountered in html
mainApp.directive('student', function() {
  //define the directive object
  var directive = {};
  //restrict = E, signifies that directive is Element directive
  directive.restrict = 'E';
  //template replaces the complete element with its text. 
  directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";
  //scope is used to distinguish each student element based on criteria.
  directive.scope = {
    student : "=name"
  }
  //compile is called during application initialization. AngularJS calls it once when html page is loaded.
  directive.compile = function(element, attributes) {
   element.css("border", "1px solid #cccccc");
  //linkFunction is linked with each element with scope to get the element specific data.
   var linkFunction = function($scope, element, attributes) {
     element.html("Student: <b>" $scope.student.name  "</b> , Roll No: <b>" $scope.student.rollno "</b><br/>");
     element.css("background-color", "#ff00ff");
   }
   return linkFunction;
  }
  return directive;
});

概念调节器以更新范围为命令。在此间,大家选拔name属性值作为子的成效域。

mainApp.controller('StudentController', function($scope) {
   $scope.Mahesh = {};
   $scope.Mahesh.name = "Mahesh Parashar";
   $scope.Mahesh.rollno = 1;

   $scope.Piyush = {};
   $scope.Piyush.name = "Piyush Parashar";
   $scope.Piyush.rollno = 2;
});

例子

<html>
<head>
  <title>Angular JS Custom Directives</title>
</head>
<body>
  <h2>AngularJS Sample Application</h2>
  <div ng-app="mainApp" ng-controller="StudentController">
 <student name="Mahesh"></student><br/>
 <student name="Piyush"></student>
  </div>
  <script src="http://www.jmtsj8.com/uploads/allimg/190718/024441GM-0.jpg"></script>
  <script>
   var mainApp = angular.module("mainApp", []);

   mainApp.directive('student', function() {
     var directive = {};
     directive.restrict = 'E';
     directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";

     directive.scope = {
      student : "=name"
     }

     directive.compile = function(element, attributes) {
      element.css("border", "1px solid #cccccc");

      var linkFunction = function($scope, element, attributes) {
        element.html("Student: <b>" $scope.student.name  "</b> , Roll No: <b>" $scope.student.rollno "</b><br/>");
        element.css("background-color", "#ff00ff");
      }

      return linkFunction;
     }

     return directive;
   });

   mainApp.controller('StudentController', function($scope) {
      $scope.Mahesh = {};
      $scope.Mahesh.name = "Mahesh Parashar";
      $scope.Mahesh.rollno = 1;

      $scope.Piyush = {};
      $scope.Piyush.name = "Piyush Parashar";
      $scope.Piyush.rollno = 2;
   });

  </script>
</body>
</html>

结果

在Web浏览器中打开textAngularJS.html。看到结果如下:

图片 1

您或者感兴趣的稿子:

  • Angularjs自定义指令实现三级联合浮动采纳地理地点
  • AngularJS创制自定义指令的秘籍详解
  • AngularJS使用自定义指令代替ng-repeat的艺术
  • AngularJS 自定义指令详解及实例代码
  • AngularJS优雅的自定义指令
  • 深深批注AngularJS中的自定义指令的选择
  • AngularJS自定义指令详解(有分页插件代码)
  • 相比较剖析Django的Q查询及AngularJS的Datatables分页插件
  • Angularjs自定义指令完成分页插件(DEMO)

本文由www.qjdy.com-奇迹赌场发布于www.qjdy.com,转载请注明出处:自定义指令使用的

关键词: www.4355mg.c

上一篇:用javascript实现自动输出网页文本

下一篇:没有了