Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="app">
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
</head>
<body>
    <sg-map header="true" />
</body>
</html>
 
angular.module('map.directive', [])
.directive('sgMap', ['$compile', function($compile) {
    return {
        replace: true,
        template: '<section class="md-whitespace-2"></section>',
        scope: {
            header: '=header',                 // Whether to show the header. (bool)
        },
        restrict: 'E',
        controllerAs: 'mapController',
        controller: [function() {
            this.changeAction = function(action) {
                console.log(action);
            };
        }],
        link: function(scope, element, attrs) {
            // Add header?
            if (scope.header) {
                $compile('<sg-map-header></sg-map-header>')(scope, function(cloned, scope) {
                    element.append(cloned);
                });
            }
        }
    };
}])
.directive('sgMapHeader', [function() {
    'use strict';
​
    return {
        replace: true,
        restrict: 'E',
        require: '^sgMap',
        scope: false,
        template: '<div ng-click="mapController.changeAction(\'hold\')">hi there</div>',
        link: ['$scope', 'mapController', function($scope, mapController) {
            mapController.changeAction('<div>hi there</div>');
        }]
    };
}]);
​
angular.module('app', ['map.directive']);
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
spamguypro
0viewers