angular 自定义指令

<div ng-controller="Controller">
  <div my-customer></div>
</div>

angular.module(‘docsSimpleDirective‘, [])
.controller(‘Controller‘, [‘$scope‘, function($scope) {
  $scope.customer = {
    name: ‘Naomi‘,
    address: ‘1600 Amphitheatre‘
  };
}])
.directive(‘myCustomer‘, function() {
  return {
    template: ‘Name: {{customer.name}} Address: {{customer.address}}‘
  };
});

结果：Name: Naomi Address: 1600 Amphitheatre

<div ng-controller="Controller">
  <div my-customer></div>
</div>

angular.module(‘docsTemplateUrlDirective‘, [])
.controller(‘Controller‘, [‘$scope‘, function($scope) {
  $scope.customer = {
    name: ‘Naomi‘,
    address: ‘1600 Amphitheatre‘
  };
}])
.directive(‘myCustomer‘, function() {
  return {
    templateUrl: ‘my-customer.html‘
  };
});

my-customer.html：

Name: {{customer.name}} Address: {{customer.address}}

结果：Name: Naomi Address: 1600 Amphitheatre

<div ng-controller="Controller">
  <div my-customer type="name"></div>
  <div my-customer type="address"></div>
</div>

angular.module(‘docsTemplateUrlDirective‘, [])
.controller(‘Controller‘, [‘$scope‘, function($scope) {
  $scope.customer = {
    name: ‘Naomi‘,
    address: ‘1600 Amphitheatre‘
  };
}])
.directive(‘myCustomer‘, function() {
  return {
    templateUrl: function(elem, attr){
      return ‘customer-‘+attr.type+‘.html‘;
    }
  };
});

customer-name.html:
Name: {{customer.name}}

customer-address.html:
Address: {{customer.address}}

结果：Name: Naomi
Address: 1600 Amphitheatre

The restrict option is typically set to:

‘A‘ - only matches attribute name
‘E‘ - only matches element name
‘C‘ - only matches class name
These restrictions can all be combined as needed:

‘AEC‘ - matches either attribute or element or class name

<div ng-controller="Controller">
  <my-customer></my-customer>
</div>

angular.module(‘docsRestrictDirective‘, [])
.controller(‘Controller‘, [‘$scope‘, function($scope) {
  $scope.customer = {
    name: ‘Naomi‘,
    address: ‘1600 Amphitheatre‘
  };
}])
.directive(‘myCustomer‘, function() {
  return {
    restrict: ‘E‘,
    templateUrl: ‘my-customer.html‘
  };
});

my-customer.html:
Name: {{customer.name}} Address: {{customer.address}}

结果：Name: Naomi Address: 1600 Amphitheatre