angular 自定义指令

Template-expanding directive：

<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

　　

Isolating the Scope of a Directive：

<div ng-controller="NaomiController">
<my-customer></my-customer>
</div>
<hr>
<div ng-controller="IgorController">
<my-customer></my-customer>
</div>

angular.module('docsScopeProblemExample', [])
.controller('NaomiController', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.controller('IgorController', ['$scope', function($scope) {
$scope.customer = {
name: 'Igor',
address: '123 Somewhere'
};
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
templateUrl: 'my-customer.html'
};
});

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

Name: Naomi Address: 1600 Amphitheatre

Name: Igor Address: 123 Somewhere

<div ng-controller="Controller">
<my-customer info="naomi"></my-customer>
<hr>
<my-customer info="igor"></my-customer>
</div>

angular.module('docsIsolateScopeDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
$scope.igor = { name: 'Igor', address: '123 Somewhere' };
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
customerInfo: '=info'
},
templateUrl: 'my-customer-iso.html'
};
});

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

结果：Name: Naomi Address: 1600 Amphitheatre
Name: Igor Address: 123 Somewhere

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

angular.module('docsIsolationExample', [])
.controller('Controller', ['$scope', function($scope) {
$scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
$scope.vojta = { name: 'Vojta', address: '3456 Somewhere Else' };
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
customerInfo: '=info'
},
templateUrl: 'my-customer-plus-vojta.html'
};
});

Name: {{customerInfo.name}} Address: {{customerInfo.address}}
<hr>
Name: {{vojta.name}} Address: {{vojta.address}}

结果：
Name: Naomi Address: 1600 Amphitheatre
Name: Address: