Understanding Scope Isolation

Various examples of ways to isolate scope in directives.

HTML

<div ng-app="myApp" ng-controller="myController"> 

    <div>
    <my-directive is-disabled-directive-var="isDisabledOuterVar" inside-directive-test-string="someTestString" />
    </div>
    
    <pre>Outside bool: {{isDisabledOuterVar|json}}</pre>
    <pre>Outside string: {{someTestString|json}}</pre>
    
</div>

JavaScript

var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
    $scope.isDisabledOuterVar = false;
    $scope.someTestString = 'blahblah I am a astring';
});

app.directive("myDirective", function () {
    return {
        restrict: 'E',
        scope: {
            isDisabledDirectiveVar: '=',
            insideDirectiveTestString: '='
        },
        template: '<input type = "text" ng-disabled= "isDisabledDirectiveVar"' +
        	'ng-model = "insideDirectiveTestString" ></input>'
    };
});