بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش بیست و یکم

AngularJS Custom Directives

Custom directive ها برای افزایش کارایی صفحات HTML مورد استفاده قرار می گیرند. Custom directive به وسیله تابع "directive" تعریف می شوند. یک custom directive به سادگی عناصر مطابقت داده شده را جایگزین می کند. برنامه های AngularJS در زمان لود شدن و آماده شدن برای اجرا (bootstrap) عنصرهایی که تطابق با درخواست ما را دارند پیدا می کند و در زمان فعال شدن از متد ()compile استفاده می کند پس از این مرحله با استفاده از متد ()link مربوط به Custom directive بر اساس Scope رهنمود مربوطه را پردازش می کند.


AngularJS  برای ساخت custom directive از انواع زیر پشتیبانی می کند.

•    Element  هنگامی که با یک عنصر مطابقت داده شود، رهنمود فعال می شود.
•    Attribute هنگامی که با یک خاصیت مطابقت داده شود، رهنمود فعال می شود.
•    CSS هنگامی که با یک استایل CSS مطابقت داده شود، رهنمود فعال می شود.
•    Comment هنگامی که با یک comment  مطابقت داد شود، رهنمود فعال می شود.
 

درک کردن رهنمودهای Custom

تگ های HTML را بنویسید:

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

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش بیست و یکم

AngularJS Custom Directives

Custom directive ها برای افزایش کارایی صفحات HTML مورد استفاده قرار می گیرند. Custom directive به وسیله تابع "directive" تعریف می شوند. یک custom directive به سادگی عناصر مطابقت داده شده را جایگزین می کند. برنامه های AngularJS در زمان لود شدن و آماده شدن برای اجرا (bootstrap) عنصرهایی که تطابق با درخواست ما را دارند پیدا می کند و در زمان فعال شدن از متد ()compile استفاده می کند پس از این مرحله با استفاده از متد ()link مربوط به Custom directive بر اساس Scope رهنمود مربوطه را پردازش می کند.


AngularJS  برای ساخت custom directive از انواع زیر پشتیبانی می کند.

•    Element  هنگامی که با یک عنصر مطابقت داده شود، رهنمود فعال می شود.
•    Attribute هنگامی که با یک خاصیت مطابقت داده شود، رهنمود فعال می شود.
•    CSS هنگامی که با یک استایل CSS مطابقت داده شود، رهنمود فعال می شود.
•    Comment هنگامی که با یک comment  مطابقت داد شود، رهنمود فعال می شود.
 

درک کردن رهنمودهای Custom

تگ های HTML را بنویسید:

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

تعریف رهنمود Custom زیر باعث می شود که تگ های بالا مدیریت شوند:

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;
});

تعریف یک کنترلر در بروز رسانی scope برای رهنمودمورد نظر، در اینجا ما نام مقادیر خصوصیت ها برای فرزند scope ها استفاده کرده ایم. (Mahesh و Piyush).

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://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></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>

کد بالا را ذخیره و اجرا کنید.
 

مشاهده تمامی آموزش های دوره AngularJS