<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.2.10/angular.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div ng-app='sharedScopeApp'>
<div ng-controller='mainCtrl as main'>
{{main.greeting}}
<br/>
<div test-name></div>
</div>
</div>
<br/>
<hr/>
<br/>
<div ng-app='isolatedScopeWithTransclusionApp'>
<div ng-controller='mainCtrl'>
<scope-with-transclusion>
<strong>{{ task.title }}</strong>
</scope-with-transclusion>
</div>
</div>
<script src="SharedScopeApp.js"></script>
<script src="SharedScopeWithTransclusionApp.js"></script>
</body>
</html>
// Code goes here
(function(angular) {
angular.module('sharedScopeApp', [])
.controller('mainCtrl', mainController)
.directive('testName', testNameDirective);
function mainController() {
this.greeting = "Hello, World";
this.name = "Eugene";
}
function testNameDirective() {
return {
restrict: 'EA',
templateUrl: 'test-name.html'
};
}
})(window.angular)
/* Styles go here */
# My experiments with directives in AngularJS
- restriction in directives:
E - can be used as an element: <my-test-el></my-test-el>
A - can be used as an attribute that's applied to an element: <div my-test-attr="test"></div>
C - can be used as in CSS class definition applied to an element: <div class="my-test-class: test;"></div>
- translusion is inclusion of a document or part of a document into another document by reference
transclude property is in directive definition. When a directive supports translusion this property is set to true.
ng-transclude directive is used to identify where new content will be placed in directive's template.
replace property of a firective is to replace the directive element with the content defined in the template
- isolate scope
@ - get an access to sting values that ar defined outside the directive: one-way binding from out to in
= - two-way binding
& - 'Hey, pass me a function that I can invoke when something happens inside of the directive'
Name:{{main.name}}
(function(angular) {
angular.module('isolatedScopeWithTransclusionApp', [])
.controller('mainCtrl', ['$scope', function($scope){
$scope.title='';
}])
.directive('scopeWithTransclusion', scopeWithTransclusionDirective);
function scopeWithTransclusionDirective() {
return {
scope:{},
restrict: 'E',
transclude: true,
replace: true,
template: '<div>Name: <input type="text" ng-model="title" /> ' +
'<div class="taskContainer"><br />' +
'<ng-transclude></ng-transclude>' +
'</div></div>'
};
};
})(window.angular);