https://github.com/normandy72/directive-apis
Directive APIs and “&” in AngularJS. Coursera course "Single Page Web Applications with AngularJS" by Yaakov Chaikin.
https://github.com/normandy72/directive-apis
angular angularjs html html5 javascript js
Last synced: about 2 months ago
JSON representation
Directive APIs and “&” in AngularJS. Coursera course "Single Page Web Applications with AngularJS" by Yaakov Chaikin.
- Host: GitHub
- URL: https://github.com/normandy72/directive-apis
- Owner: Normandy72
- Created: 2023-01-11T11:01:19.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T12:27:06.000Z (over 3 years ago)
- Last Synced: 2025-03-04T08:44:55.055Z (over 1 year ago)
- Topics: angular, angularjs, html, html5, javascript, js
- Language: JavaScript
- Homepage:
- Size: 66.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Directive APIs and “&”
### Step 1: Define Method in Controller
```
function Controller(){
this.method = function(arg1){
this.prop = "Hi" + arg1;
};
}
```
`this.method` - 'this' refers to parent controller instance
`arg1` - 'arg1' needs to come from child directive
### Step 2: Declare Method Reference in Directive
```
function MyDirective(){
var ddo = {
scope:{
myMethod: '&method'
},
...
temolateUrl: 'template.html'
};
return ddo;
}
```
`myMethod` - property name to reference parent method in directive
`'&method'` - attribute name to use in parent temolate on this directive
### Step 3: Declare In Parent's Template
```
```
`.method` - reference to method in controller
`(myArg)` - placeholder label for value to be passed in from directive
### Step 4: Map Method & Args in Directive's Template
```
Remove Item
```
`.myMethod` - method name from isolate scope mapping
`{myArg : 'v1'}` - map of parent template declared arg name to value from directive
***
##### _Summary_
* '&' binding allows us to execute an expression (such a function value) in the context of the parent scope.
* Parent template must declare an attribute providing:
* Method reference to call on the patent.
* Argument keys for directive to bind values to.
* Directive:
* calls the referenced method;
* provides a map of argument key to value pairs;
* allows directive to pass data back to parent from isolate scope.
***