Question

我必须花费几个指令组件。但事实上我并没有改变。在这种情况下，可以使用下面的指令来完成。如？非常感谢你。

(function() {
'use strict';

angular
.module('01')
.directive('tableSortable', tableSortable);

/** @ngInject */
function tableSortable() {
return {
  restrict: 'E',
  transclude: true,
  templateUrl: 'app/components/tabla/tableSortable.html',
  scope: {
    columns: '=',
    data: '=',
    sort: '=',
    click: '&'
  },
  link: function(scope) {
    scope.selectedClass = function(columnName) {
      return columnName == scope.sort.column ? 'sort-' + scope.sort.descending : false;
    };
  }
};

} }）（）;

Answer 1

文档中给出了关于组件及其与指令的关系的简单解释。

在Angular中，Component是一种特殊的指令，它使用更简单的配置，适用于基于组件的应用程序结构（AngularJs guide for components）。

基本上，组件是一个简单的指令，具有为链接和编译阶段定义的默认行为，以及其他深层行为，例如priority或restrict。此外，范围始终在组件上隔离，因为范围之间的所有交互必须由组件的绑定控制。

组件的目的是创建可重用的接口块，而不是过多地关注元素的深层行为，但是对于该块的特征，它就像一个更客观的指令而不是行为。无论如何，之前已经使用过类似组件的指令，但它还没有被称为组件。

关于指令声明，组件没有太大变化，声明这样的指令变得有点简单，但它具有大多数指令功能。例如，您的指令看起来就像下面的代码。

(function() {
  'use strict';

  angular
    .module('01')
    .component('tableSortable', {
      transclude: true,
      templateUrl: 'app/components/tabla/tableSortable.html',
      controller: TableSortableComponentController,
      controllerAs: '$ctrl',
      bindings: {
        // consider using a one-way binding like '>'
        columns: '=',
        data: '=',
        sort: '=',
        click: '&'
      }
    });

  function TableSortableComponentController($scope, $element, $attrs) {
    var $ctrl = this;

    $ctrl.selectedClass = function(columnName) {
      return columnName == $ctrl.sort.column ? 'sort-' + $ctrl.sort.descending : false;
    };
  }    
})();

组件Angular 1.5x的指令

1 个答案: