dynamic-directive
Version:
Dynamic directives for AngularJS
57 lines (54 loc) • 1.85 kB
HTML
<html>
<head>
<title>Dynamic directive: injected scope</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('avatar', function() {
return {
restrict: 'E',
template: '<button ng-click="doSomething()">Click me!</button>',
replace: true
};
})
.directive('addItem', ['$window', 'dynamicDirectiveService', function($window, dynamicDirectiveService){
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.doSomething = function() {
$window.alert('It works!');
}
var dd = new dynamicDirectiveService.DynamicDirective(function() {return true;}, 'avatar', {
scope: scope
});
scope.add = function() {
dynamicDirectiveService.addInjection('menu', 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>A example of injected scope</h2>
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="nav nav-pills nav-stacked" dynamic-directive="menu">
<div>Profile</div>
</div>
</div>
<div class="col-xs-6">
<p>
<button add-item ng-click='add()'>Dynamically add the avatar item</button>
</p>
</div>
</div>
</div>
</body>
</html>