آموزش AngularJS

آموزش AngularJS – دستورات سفارشی

در AngularJS، دستورات سفارشی برای توسعه ی عملکرد HTML به کار میرن. دستورات سفارشی با استفاده از تابعِ “directive” تعریف میشن. دستور سفارشی، به سادگی عنصر را برای چیزی که بخاطر آن فعال شده، جایگزین می کنه. برنامه ی AngularJS در طیِ bootstrap، عنصرهای سازگار را پیدا می کنه و با استفاده از متدِ compile() خودش، که یک دستور سفارشیِه، فعالیتی را یک بار انجام میده، سپس با استفاده از متدِ link() که یک دستور سفارشیِه، بر اساسِ حوزه ی دستور، عنصر را پردازش می کنه. AngularJS از ایجاد دستورات سفارشی برای عناصر زیر پشتیبانی می کنه.

  •  دستوراتِ عناصر – وقتی یک عنصر سازگار پیدا میشه، دستورات عمل می کنن.
  •  خصیصه (Attribute) - وقتی یک عنصر سازگار پیدا میشه، دستورات عمل می کنن.
  •  CSS - وقتی یک استایلِ CSS سازگار پیدا میشه، دستورات عمل می کنن.
  •  comment (توضیح) - وقتی یک 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;
});

برای به روز رسانیِ scope برای دستور، controller را تعریف کنین. در ادامه از مقدارِ خصیصه ی (attribute) name بعنوان فرزندِ scope استفاده کرده ایم.

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 = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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>

نتیجه

textAngularJS.htm را در مرورگر وب باز کنین. نتیجه را ببینین.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش AngularJS

Learn AngularJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...