Angular: Empty Fiddle

http://angularjs.org/

by martijngr

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
    <div ng-controller="MyCtrl">
      Hello, {{name}}!
        
        <button ng-click="visible = !visible">Toggle</button>
    
        <div ng-show="visible" style="background: blue;">
            Some content 
            <sample visible="visible"></sample>
        </div>
    </div>

JavaScript

var myApp = angular.module('myApp',[]);
    
    //myApp.directive('myDirective', function() {});
    //myApp.factory('myService', function() {});
    
    function MyCtrl($scope) {
        $scope.name = 'Superhero';
        $scope.visible = true;
    }
    
    myApp.directive("sample", function(){
        return {
            restrict: 'E',
            template: '<span ng-click="hide()" style="cursor: pointer;">X</span>',
            scope:{
                visible: '='
            },
            link: function(scope, element, attributes){
                scope.hide = function(){
                    console.log(scope.visible);
                    scope.visible = false;
                }
            }
        }
    });