https://github.com/normandy72/manipulating-the-dom
Manipulating the DOM with link in AngularJS. Coursera course "Single Page Web Applications with AngularJS" by Yaakov Chaikin.
https://github.com/normandy72/manipulating-the-dom
angular angularjs css css3 html html5 javascript jqlite jquery js
Last synced: 3 months ago
JSON representation
Manipulating the DOM with link in AngularJS. Coursera course "Single Page Web Applications with AngularJS" by Yaakov Chaikin.
- Host: GitHub
- URL: https://github.com/normandy72/manipulating-the-dom
- Owner: Normandy72
- Created: 2023-01-11T13:16:10.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T14:44:24.000Z (over 2 years ago)
- Last Synced: 2025-01-14T12:46:31.708Z (4 months ago)
- Topics: angular, angularjs, css, css3, html, html5, javascript, jqlite, jquery, js
- Language: JavaScript
- Homepage:
- Size: 97.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Manipulating the DOM with link
### Step 1: Declare Link Function
```
function MyDirective(){
var ddo = {
scope: {...},
link: linkFunction,
...
templateUrl: 'template.html'
};
return ddo;
}
```
### Step 2: Define the Link Function
```
function LinkFunction(scope, element, attrs, controller){
...
}
```
***
##### _Summary_
* DOM manipulation usually done inside of the link function declared on the DDO.
* Link function does not support injection. To use injected components, services, inject them into directive.
* 'scope' parameter is the exact `$scope` in directive's controller.
* 'element' object represents the element of the directive:
* Top level element.
* It's jqLite object or jQuery object (if jQuery is included before Angular).
***
## Using Directive’s transclude to Wrap Other Elements
### Step 1: Set transclude to true
```
function MyDirective(){
var ddo = {
scope: {...},
transclude: true,
...
templateUrl: "template.html"
};
return ddo;
}
```
### Step 2: Wrap Some Parent Content
```
WARNING! WARNING! {{ctrl.someProp}}
```
`{{ctrl.someProp}}` - evaluated in the parent controller, NOT in our directive
### Step 3: ng-transclude To Place Wrapper Content
```
...
```
`` - insert evaluated wrapped content into element marked with ng-transclude
***
##### _Summary_
* `transclude` allows whole templates to be passed into a directive.
* The wrapped content is evaluated in the parent's context, NOT in the directive's context.
* In the DDO:
* transclude: true
* In directive's template:
* ng-transclude attribute designates place for evaluated wrapped content.
***