Basic Angular Controller

by Ryan

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
<div data-ng-app="app" data-ng-controller="MainController">
    <div data-directive data-outer="config.outer" data-inner="config.inner">outer: {{outer}}, inner: {{inner}}</div>
</div>

JavaScript

var app = angular.module('app', []);
var app-ext = angular.module('app-ext', []);

function MainController($scope, $log) {
    console.log("controller");
    $scope.config = { outer: 'Outer Value', inner: 'Inner Value' };
}

app.directive('directive', function() {
	return {
		restrict: 'A',
        scope: { outer: '=' },
        controller: function ($scope) {
            this.getParentScope = function() { return $scope; };
        },
		link: function(scope, element, attrs) {
            console.log('directive.link, outer: ' + scope.outer);
            scope.$watch('outer', function(n,o){
                console.log('directive.watch, outer: ' + scope.outer);
            });
        }
    };
});

app-ext.config(function($provide) {
  $provide.decorator('directiveDirective', function($delegate) {
    $delegate[0].scope.inner = "=";    
    return $delegate;
  });
});

app-ext.directive('inner', function(){
    return {
        restrict: 'A',
        scope: false,
        replace: false,
        require: 'directive',
        link: function(scope, element, attrs, controller){
            var parentScope = controller.getParentScope();
            console.log('inner.inner: ' + parentScope.inner);
        }
    };
});