Understanding Scope Isolation

Various examples of ways to isolate scope in directives.

HTML

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

    <div>
    <my-directive isDisabledDirectiveVar = "isDisabledOuterVar" insideDirectiveTestString = "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 = true;
    $scope.someTestString = 'blahblah I am a astring';
});

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