AngularJS Example

by Stefan Urbanek

HTML

<div ng-app="app">
  <div ng-controller="Outer">
  <div ng-controller="Inner">
    <editor ng-model="content"></editor>
  </div>
  </div>
</div>

CSS

</style> <!-- Ugly Hack to make remote files preload in jsFiddle --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<style>

JavaScript

function Outer($scope) {
    $scope.items = ["one", "two", "three"];
}

function Inner($scope) {
  $scope.content = {}
  $scope.content.title = 'Hi There';
  $scope.content.text = 'This is text';
}

angular.module('app', [])
 .directive('editor', function(){
    return {
      restrict: 'E',
      require: "ngModel",
      scope: {
          content:'=ngModel',
          items: '@'
      },
      template: 
          '<input ng-model="content.title"><br>'+
          '<textarea ng-model="content.text"></textarea> <br/>' +
          '<div style="border: 1px solid black;">' +
          '<div style="background-color: gray">{{content.title}}</div>' +
          '<select class="form-control"' +
            'ng-options="item in items">' +
          '</select>' +
          '<div>{{content.text}}</div>' +
          '</div>',
        link: function($scope, $element, $attrs) {
            console.log("Content:");
            console.log($scope.content);
            console.log("Parent Items:");
            console.log($scope.$parent.items);
            console.log("Items:");
            console.log($scope.items);
        }
        
    };
});