AngularJS and Coffeescript

1_readme.md

Run this example at 2925443.run-a-gist.herokuapp.com

application.coffee

app = angular.module("myApp", [])

treeHtml =
  """
 <div style="padding-left:10px;">
    <div>{{node.name}}

    <button ng-click="add(node)">+</button>
    <button ng-hide="parent == undefined" ng-click="delete(parent, node)">x</button>

  </div>

    <div ng-repeat="child in node.children">
      <tree node="child" parent="node"></tree>
         </div>
 </div>

  """


app.directive 'tree', ($compile) -> {

  restrict: 'E',
  scope: {
    node: "="
    parent: "="
  }

  link : (scope, elem, attrs) ->
    scope.n = 0

    scope.add = (node) ->
      newNode = { name: "New child " + scope.n++, children : [] }
      node.children.push(newNode)

    scope.delete = (parent, node) ->
      i = parent.children.indexOf node
      parent.children.splice(i, 1)


    elem.append ($compile treeHtml) scope
}

@MyCtrl = ($scope) ->
 
  $scope.root = {

  name : "root"
  children : [ { name : "Child 1", children : [] }, {name : "Child 2", children : [] }]
  }

index.haml

!!! 5
%html(ng-app='myApp')
  %head
    %title Tree edit AngularJS
    %script(src='http://code.angularjs.org/angular-1.0.0rc12.min.js')
    %link(href="http://softwaremaniacs.org/media/soft/highlight/styles/zenburn.css" media="screen" rel="stylesheet" type="text/css")
    %link(href="/screen.css" media="screen" rel="stylesheet" type="text/css")
    %script(src='/application.js')
  
  %body(ng-controller='MyCtrl')
    %tree(node="root")

screen.scss

body {
  background-color: #CCC;
  max-width: 640px;
  margin: 0 auto;
  font-family: Georgia;
  color: hsl(0, 0%, 10%);
  text-shadow: 0 1px 0 hsl(0, 0%, 80%);
  background: -webkit-linear-gradient(left, hsla(0, 0%, 0%, 0.25), hsla(0, 0%, 0%, 0.28), hsla(0, 0%, 0%, 0.22));
}

pre {
  text-shadow: none;
  overflow: auto;
}