如何使用指令创建可恢复组件

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 对象里面的指令来定义行为。