Angular 内置 Provider 之 $compileProvider 详解

在 AngularJS 中，提供了很多内置的提供者(provider)来帮助我们进行 MVC 开发。其中 $compileProvider 是 Angular 中一个非常重要的内置提供者，它负责编译 HTML 模板。

什么是 $compileProvider

$compileProvider 是 AngularJS 中的一个内置提供者，通过该提供者，可以对 HTML 模板进行动态编译，并将其转换成 DOM 元素并进行渲染。

如何使用 $compileProvider

要使用 $compileProvider，首先需要将它注入到你的组件或控制器中。

angular.module('myApp', [])
  .controller('ExampleController', function($scope, $compile) {
    // ...
  });

在使用 $compileProvider 之前，我们需要了解它的几个重要方法，分别是：

1. directive

通过 directive 方法可以在 HTML 中注册一个指令，该指令能够自定义 DOM 的行为。

$compileProvider.directive('myDirective', function() {
  return {
    // 自定义 DOM 行为
    link: function(scope, element, attrs) {
      // 在 DOM 加载完成后进行逻辑操作
      element.on('load', function() {
        console.log('MyDirective is Loaded');
      });
    }
  };
});

上面的示例中，我们自定义了一个指令 myDirective，它在 DOM 加载完成后会打印一行日志。

2. component

通过 component 方法可以在 HTML 中注册一个组件，该组件可以自定义组件的属性和行为。

$compileProvider.component('myComponent', {
  templateUrl: 'my-component.html',
  controller: function() {
    this.greetings = 'Hello World!';
  }
});

上面的示例中，我们自定义了一个组件 myComponent，它有一个模板 my-component.html，并且有一个初始化属性 greetings。

实例演示

下面我们通过一些具体的演示来进一步了解 $compileProvider 的使用方法。

示例 1：自定义指令

在本示例中，我们将创建一个自定义指令 myDirective，使得它可以在 DOM 加载完成后修改元素的颜色。

angular.module('myApp', [])
  .controller('ExampleController', function($scope) {
    $scope.colors = ['black', 'red', 'yellow', 'green', 'blue'];

    $scope.randomColor = function() {
      return $scope.colors[Math.floor(Math.random() * $scope.colors.length)];
    };
  })
  .directive('myDirective', function() {
    return {
      link: function(scope, element, attrs) {
        element.css('color', scope.randomColor());
      }
    };
  });

上面的代码中，我们在 controller 中定义了一个数组和一个随机颜色的方法，接着在指令中使用了这个方法，让每一个指令所对应的元素随机变色。

示例 2：自定义组件

在本示例中，我们将创建一个自定义组件 myComponent，它将展示一个结果数组，可以通过输入框来筛选数组中的元素。

angular.module('myApp', [])
  .controller('ExampleController', function($scope) {
    $scope.results = [
      { name: 'China', population: '1.38 billion' },
      { name: 'India', population: '1.34 billion' },
      { name: 'USA', population: '330 million' },
      { name: 'Indonesia', population: '270 million' },
    ];
  })
  .component('myComponent', {
    templateUrl: 'my-component.html',
    controller: function() {
      var $ctrl = this;

      $ctrl.filterResults = function() {
        $ctrl.filteredResults = $ctrl.results.filter(function(result) {
          return result.name.toLowerCase().indexOf($ctrl.filter.toLowerCase()) !== -1;
        });
      };

      $ctrl.$onInit = function() {
        $ctrl.filterResults();
      };
    }
  });

上面的代码中，我们在 controller 中定义了一个数组 results，接着自定义了一个组件 myComponent，并定义了一个过滤方法 filterResults，最后在组件中使用该方法并且在结果展示页面做了出入框监听事件。我们可以在 myComponent.html 中使用 ng-repeat 指令展示出过滤后的结果。

总结

通过本文的介绍，希望你能够了解 $compileProvider 的作用和使用方法。在实际开发项目中，可以通过 $compileProvider 来自定义指令和组件，简化项目的操作，并且提高代码的可读性和可维护性。