dynamic-directive
Version:
Dynamic directives for AngularJS
81 lines (75 loc) • 2.47 kB
HTML
<html>
<head>
<title>Dynamic directive: Conditional injection</title>
<script src="../frontend/components/jquery/dist/jquery.min.js"></script>
<script src="../frontend/components/angular/angular.min.js"></script>
<script src="../dist/dynamic-directive.min.js"></script>
<script>
angular.module('example', ['op.dynamicDirective'])
.directive('displaycontact', function() {
return {
restrict: 'E',
scope: {
contact: '='
},
template: '<div>Contact name: {{contact.name}}</div>',
replace: true
};
})
.factory('user', function() {
return {
name: 'Tony Stark'
};
})
.controller('contactController', function($scope) {
$scope.contacts = [
{
name: 'Bruce Willis',
email: 'bruce@usa.com'
},
{
name: 'Tony Stark',
email: 'tony@iron.com'
}
];
})
.directive('addItem', ['dynamicDirectiveService', 'user', function(dynamicDirectiveService, user){
var condition = function(scope) {
return scope.contact.name !== user.name;
};
var dd = new dynamicDirectiveService.DynamicDirective(condition, 'displaycontact', {
attributes: [{name: 'contact', value: 'contact'}]
});
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.user = user;
scope.add = function() {
dynamicDirectiveService.addInjection('contactDisplay', dd);
element.attr('disabled', 'disabled');
};
}
};
}]);
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
</head>
<body ng-app='example'>
<h2>Conditional injection example</h2>
<div class="container">
<div class="row">
<div class="col-xs-6" ng-controller="contactController" >
<div ng-repeat="contact in contacts" dynamic-directive="contactDisplay">
</div>
</div>
<div class="col-xs-6">
<p>Do not display the contact that got my name ({{user.name}}).</p>
<p>
<button add-item ng-click='add()'>Dynamically add the displaycontact directive</button>
</p>
</div>
</div>
</div>
</body>
</html>