dynamic-directive
Version:
Dynamic directives for AngularJS
72 lines (69 loc) • 2.5 kB
HTML
<html>
<head>
<title>Dynamic directive: Priorities</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('red', function() {
return {
restrict: 'E',
template: '<div>Red</div>',
replace: true
};
})
.directive('blue', function() {
return {
restrict: 'E',
template: '<div>Blue</div>',
replace: true
};
})
.directive('green', function() {
return {
restrict: 'E',
template: '<div>Green</div>',
replace: true
};
})
.directive('addItem', ['dynamicDirectiveService', function(dynamicDirectiveService){
var dd = new dynamicDirectiveService.DynamicDirective(function() {return true;}, 'green', {priority: 0});
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.add = function() {
dynamicDirectiveService.addInjection('colors', dd);
element.attr('disabled', 'disabled');
};
}
};
}])
.config(['dynamicDirectiveServiceProvider', function(dynamicDirectiveServiceProvider) {
var dd = new dynamicDirectiveServiceProvider.DynamicDirective(function() {return true;}, 'blue', {priority: -100});
var dd2 = new dynamicDirectiveServiceProvider.DynamicDirective(function() {return true;}, 'red', {priority: 100});
dynamicDirectiveServiceProvider.addInjection('colors', dd);
dynamicDirectiveServiceProvider.addInjection('colors', dd2);
}]);
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
</head>
<body ng-app='example'>
<h2>Priority example</h2>
<div class="container">
<div class="row">
<div class="col-xs-6" dynamic-directive="colors">
</div>
<div class="col-xs-6">
<p>
Blue has a priority of -100.<br>
Red has a priority of 100.<br>
Green has a priority of 0.<br>
<button add-item ng-click='add()'>Dynamically add the green directive</button>
</p>
</div>
</div>
</div>
</body>
</html>