AngularJS isolate scope demonstration.

by razh

HTML

<div ng-app="myApp" ng-controller="MainCtrl">
    <test ng-show="isShowing()"></test>
    <test-isolate-scope ng-hide="isShowing()"></test-isolate-scope>
    <button ng-click="toggleShowing()">Toggle showing</button>
</div>

JavaScript

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

app.directive('test', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div>Hello world!</div>'
    }
});

app.directive('testIsolateScope', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div>Isolate scope doesn\'t know when to hide!</div>',
        scope: {}
    }
});


app.controller('MainCtrl', function($scope) {
    $scope.showing = false;
    
    $scope.isShowing = function() {
        return $scope.showing;
    };
    
    $scope.toggleShowing = function() {
        $scope.showing = !$scope.showing;
    };
});