<div ng-controller="Controller">
<my-customer info="{{naomi}}"></my-customer>
</div>
angular.module('docsIsolateScopeDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.naomi="aaa";
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
customerInfo: '@info' //或者info:'@'
},
template: 'Name:{{customerInfo}}'
};
});
结果:Name:aaa
<div ng-controller="Controller">
<my-customer info="naomi"></my-customer>
</div>
angular.module('docsIsolateScopeDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.naomi="aaa";
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
customerInfo: '@info'//或者info:'@'
},
template: 'Name:{{customerInfo}}'
};
});
结果:Name:naomi
<div ng-controller="Controller">
<my-customer info="naomi"></my-customer>
</div>
angular.module('docsIsolateScopeDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
info: '='//或者customerInfo:'=info'
},
template: 'Name:{{info.name}},address:{{info.address}}'
};
});
结果:Name:Naomi,address:1600 Amphitheatre
<div ng-controller="Controller">
{{message}}
<my-dialog ng-hide="dialogIsHidden" on-close="hideDialog(message)" 或者 close="hideDialog(message)">
Check out the contents, {{name}}!
</my-dialog>
</div>
angular.module('docsIsoFnBindExample', [])
.controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {
$scope.name = 'Tobias';
$scope.message = '';
$scope.hideDialog = function (message) {
$scope.message = message;
$scope.dialogIsHidden = true;
$timeout(function () {
$scope.message = '';
$scope.dialogIsHidden = false;
}, 2000);
};
}])
.directive('myDialog', function() {
return {
restrict: 'E',
transclude: true,
scope: {
'close': '&onClose'//或者'onclose':'&close'
},
template: '<div class="alert">'+
'<a href class="close" ng-click="close({message: \'closing for now\'})">×</a>'+
'<div ng-transclude></div>'+
'</div>'
};
});