2
2
* @ngdoc module
3
3
* @name material.components.sticky
4
4
* @description
5
- * Sticky effects for md
6
- *
5
+ * Sticky effects for md.
7
6
*/
8
7
angular
9
8
. module ( 'material.components.sticky' , [
@@ -18,65 +17,69 @@ angular
18
17
* @module material.components.sticky
19
18
*
20
19
* @description
21
- * The `$mdSticky`service provides a mixin to make elements sticky.
20
+ * The `$mdSticky` service provides the capability to make elements sticky, even when the browser
21
+ * does not support `position: sticky`.
22
22
*
23
- * Whenever the current browser supports stickiness natively, the `$mdSticky` service will just
24
- * use the native browser stickiness .
23
+ * Whenever the current browser supports stickiness natively, the `$mdSticky` service will leverage
24
+ * the native browser's sticky functionality .
25
25
*
26
- * By default the `$mdSticky` service compiles the cloned element, when not specified through the `elementClone`
27
- * parameter, in the same scope as the actual element lives.
26
+ * By default the `$mdSticky` service compiles the cloned element, when not specified through the
27
+ * `stickyClone` parameter, in the same scope as the actual element lives.
28
28
*
29
+ * @usage
30
+ * <hljs lang="js">
31
+ * angular.module('myModule')
32
+ * .directive('stickyText', function($mdSticky) {
33
+ * return {
34
+ * restrict: 'E',
35
+ * template: '<span>Sticky Text</span>',
36
+ * link: function(scope, element) {
37
+ * $mdSticky(scope, element);
38
+ * }
39
+ * };
40
+ * });
41
+ * </hljs>
29
42
*
30
43
* <h3>Notes</h3>
31
- * When using an element which is containing a compiled directive, which changed its DOM structure during compilation,
32
- * you should compile the clone yourself using the plain template.<br/><br/>
33
- * See the right usage below:
44
+ * When using an element which contains a compiled directive that changes the DOM structure
45
+ * during compilation, you should compile the clone yourself.
46
+ *
47
+ * An example of this usage can be found below:
34
48
* <hljs lang="js">
35
49
* angular.module('myModule')
36
50
* .directive('stickySelect', function($mdSticky, $compile) {
37
51
* var SELECT_TEMPLATE =
38
52
* '<md-select ng-model="selected">' +
39
- * ' <md-option>Option 1</md-option>' +
53
+ * ' <md-option>Option 1</md-option>' +
40
54
* '</md-select>';
41
55
*
42
56
* return {
43
57
* restrict: 'E',
44
58
* replace: true,
45
59
* template: SELECT_TEMPLATE,
46
- * link: function(scope,element) {
60
+ * link: function(scope, element) {
47
61
* $mdSticky(scope, element, $compile(SELECT_TEMPLATE)(scope));
48
62
* }
49
63
* };
50
64
* });
51
65
* </hljs>
52
66
*
53
- * @usage
54
- * <hljs lang="js">
55
- * angular.module('myModule')
56
- * .directive('stickyText', function($mdSticky, $compile) {
57
- * return {
58
- * restrict: 'E',
59
- * template: '<span>Sticky Text</span>',
60
- * link: function(scope,element) {
61
- * $mdSticky(scope, element);
62
- * }
63
- * };
64
- * });
65
- * </hljs>
66
- *
67
- * @returns A `$mdSticky` function that takes three arguments:
68
- * - `scope`
69
- * - `element`: The element that will be 'sticky'
70
- * - `elementClone`: A clone of the element, that will be shown
71
- * when the user starts scrolling past the original element.
72
- * If not provided, it will use the result of `element.clone()` and compiles it in the given scope.
67
+ * @returns {function(IScope, JQLite, ITemplateLinkingFunction=): void } `$mdSticky` returns a
68
+ * function that takes three arguments:
69
+ * - `scope`: the scope to use when compiling the clone and listening for the `$destroy` event,
70
+ * which triggers removal of the clone
71
+ * - `element`: the element that will be 'sticky'
72
+ * - `stickyClone`: An optional clone of the element (returned from AngularJS'
73
+ * [$compile service](https://docs.angularjs.org/api/ng/service/$compile#usage)),
74
+ * that will be shown when the user starts scrolling past the original element. If not
75
+ * provided, the result of `element.clone()` will be used and compiled in the given scope.
73
76
*/
74
77
function MdSticky ( $mdConstant , $$rAF , $mdUtil , $compile ) {
75
78
76
79
var browserStickySupport = $mdUtil . checkStickySupport ( ) ;
77
80
78
81
/**
79
- * Registers an element as sticky, used internally by directives to register themselves
82
+ * Registers an element as sticky, used internally by directives to register themselves.
80
83
*/
81
84
return function registerStickyElement ( scope , element , stickyClone ) {
82
85
var contentCtrl = element . controller ( 'mdContent' ) ;
0 commit comments