如何使用指令建立可恢復元件

Created: November-22, 2018

AngularJS 指令控制 AngularJS 應用程式內的 HTML 呈現。它們可以是 Html 元素，屬性，類或註釋。指令用於操作 DOM，將新行為附加到 HTML 元素，資料繫結等等。角度提供的一些指令示例是 ng-model，ng-hide，ng-if。

同樣，可以建立自己的自定義指令並使其可以恢復。用於建立 Custom 指令參考。建立可重用指令背後的意義是建立一組由你編寫的指令/元件，就像 angularjs 使用 angular.js 一樣。當你擁有需要一致行為，外觀和感覺的應用程式/應用程式套件時，這些可重用指令尤其有用。這種可重用元件的一個示例可以是一個簡單的工具欄，你可能希望在整個應用程式或不同的應用程式中使用它，但你希望它們的行為相同或看起來相同。

首先，在 app 資料夾中建立一個名為 resuableComponents 的資料夾，然後建立 reusableModuleApp.js

reusableModuleApp.js：

(function(){

 var reusableModuleApp = angular.module('resuableModuleApp', ['ngSanitize']);

 //Remember whatever dependencies you have in here should be injected in the app module where it is intended to be used or it's scripts should be included in your main app  
                               //We will be injecting ng-sanitize

 resubaleModuleApp.directive('toolbar', toolbar)

 toolbar.$inject=['$sce'];

 function toolbar($sce){

     return{ 
     restrict :'AE',
        //Defining below isolate scope actually provides window for the directive to take data from app that will be using this.
        scope : {
                value1: '=',
                value2: '=',
                },

         }
     template : '<ul>  <li><a ng-click="Add()" href="">{{value1}}</a></li>  <li><a ng-click="Edit()" href="#">{{value2}}</a></li> </ul> ',
         link : function(scope, element, attrs){
           
              //Handle's Add function
              scope.Add = function(){

              };

              //Handle's Edit function
              scope.Edit = function(){

              };
     }
  }

});

mainApp.js：

(function(){
   var mainApp = angular.module('mainApp', ['reusableModuleApp']); //Inject resuableModuleApp in your application where you want to use toolbar component
   
   mainApp.controller('mainAppController', function($scope){
      $scope.value1 = "Add";
      $scope.value2 = "Edit"; 
   
   });
 
 });

index.html 的：

 <!doctype html>
 <html ng-app="mainApp">
 <head>
  <title> Demo Making a reusable component
 <head>
  <body ng-controller="mainAppController">
   
     <!-- We are providing data to toolbar directive using mainApp'controller -->
     <toolbar value1="value1" value2="value2"></toolbar>
  
    <!-- We need to add the dependent js files on both apps here -->
     <script src="js/angular.js"></script>
     <script src="js/angular-sanitize.js"></script>
    
     <!-- your mainApp.js should be added afterwards --->
      <script src="mainApp.js"></script>

     <!-- Add your reusable component js files here -->
      <script src="resuableComponents/reusableModuleApp.js"></script>

  </body>
 </html>

預設情況下，指令是可重用的元件。當你在單獨的角度模組中製作指令時，它實際上使它可以在不同的 angularJs 應用程式中匯出和重用。新指令可以簡單地新增到 reusableModuleApp.js 中，而 reusableModuleApp 可以擁有它自己的控制器，服務，DDO 物件裡面的指令來定義行為。