Directive Dual Bind

Testing to see how to build a directive that created UI elements that bind back to the parent model.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<p>Testing Directive Binding</p>
<hr/>
<div ng-app="interfaceSettings" ng-controller="TestDirective">
    <ul>
        <li><b>AngularVersion:</b> {{settings.angularVersion.full}}</li>
        <li><b>ServerName:</b> {{settings.serverName}}</li>
    </ul>
    <hr/>Server Name (template):
    <input type="text" ng-model="settings.serverName">
    <br/>
    <hr/>Using the directive:
    <br/>
    <ei-server-name server-name-model="settings.serverName" />
</div>

CSS

body {
    padding: 10px;
    font-family: sans-serif;
    font-size: 1.0em;
}
.small {
    font-size:x-small;
}

JavaScript

var settingsModule = angular.module('interfaceSettings', []);
settingsModule.directive('eiServerName', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            serverNameModel: 'accessor'
        },
        template: '<div>Local model: <input type="text" ng-model="localModel"></div>',
        link: function (scope) {
            // bind from ei-server -> parent
            scope.$watch('localModel', function (value) {
                console.log('VALUE IN DIRECTIVE CHANGED -> changing parent value', value);
                if (value !== undefined) {
                    scope.serverNameModel(value);
                }
            });

            // bind from parent -> ei-server
            scope.$watch(function () {
                return scope.serverNameModel()
            }, function (value) {
                console.log('VALUE IN PARENT CHANGED -> changing local value', value);
                scope.localModel = value;
            });
        }
    };
});

function TestDirective($scope) {
    $scope.settings = {
        angularVersion: angular.version,
        serverName: 'vaiism'
    };
}