Basic Angular Controller

by Ryan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="MainController">
    <div data-directive ></div>
</div>

JavaScript

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

app.controller('MainController', ['$scope', '$log', 
    function($scope, $log) {
        // nothing in here
    }
]);

app.directive('directive', [ function() {
    return {
		restrict: 'A',
        scope: { },
        template: '<div><button data-ng-click="doClick()">Log</button><div data-outer-directive data-wf-outer="outer"></div></div>',
        controller: function ($scope) {
        },
		link: function(scope, element, attrs) {
            // This directive initializes the control object
            // and then it is bound to the outer directive's 
            // outer parameter.
            scope.outer = {};

            // When the user clicks the button, call the control
            // object's log function
            scope.doClick = function() { scope.outer.doLog(); };
        }
    };
}]);
              
app.directive('outerDirective', [ function() {
	return {
		restrict: 'A',
        scope: { outer: '=wfOuter' },
        template: '<div data-inner-directive data-wf-inner="inner"></div>',
        controller: function ($scope) {
        },
		link: function(scope, element, attrs) {
            // Watch the outer bind parameter and copy it to inner
            scope.$watch('outer', function(n,o) {
                console.log('outer watch: ' + n);
                scope.inner = scope.outer;
            });
        }
    };
}]);

app.directive('innerDirective', [ function() {
    return {
        restrict: 'A',
        scope: { inner: '=wfInner' },
        controller: function ($scope) {
        },
        link: function(scope, element, attrs, controller){
            var doLog = function() { console.log("Do Log!"); }; 
            scope.$watch('inner', function(n,o) {
                console.log("inner watch");
                console.log(scope.inner);

                if(null != scope.inner) {
                    scope.inner.doLog = doLog;
                }
            });
        }
    };
}]);