Edit in JSFiddle

//宣告ng-app
var demoApp = angular.module("demoapp", []);

//ng-app底下掛載ng-controller
demoApp.controller("demoCtrl", function($scope) {
	$scope.name = 'Ryan';
});

//ng-app底下掛載directive
demoApp.directive('scopetrueDirective', function() {
  return {
  	restrict:'AE',
  	scope: true,
    template: '<input type="text" ng-model="name"/>'
  };
})
.directive('scopefalseDirective', function() {
  return {
  	restrict:'AE',
  	scope: false,
    template: '<input type="text" ng-model="name"/>'
  };
})
.directive('scopeisolate1Directive', function() {
  return {
  	restrict:'AE',
  	scope: {},
    template: '<input type="text" ng-model="name"/>'
  };
})
.directive('scopeisolate2Directive', function() {
  return {
  	restrict:'AE',
  	scope: {
    	name: '='
    },
    template: '<input type="text" ng-model="name"/>'
  };
})
.directive('scopeisolate3Directive', function() {
  return {
  	restrict:'AE',
  	scope: {
    	name: '@'
    },
    template: '<input type="text" ng-model="name"/>'
  };
})
;

<div ng-app="demoapp">
  <div ng-controller="demoCtrl">
    <h1>AngularJs directive scope Demo</h1>
    <h3>資料：$scope.name = {{name}}</h3>
    <h2>1.沒scope:false</h2>
    <div scopefalse-directive></div>
    <h2>2.有scope（繼承父scope）:true</h2>
    <div scopetrue-directive></div>
    <h2>3.scope獨立:{}</h2>
    <div scopeisolate1-directive></div>
    <h2>4.scope雙向綁定:{=}</h2>
    <div scopeisolate2-directive name="name"></div>
    <h2>4.scope單向綁定:{@}</h2>
    <div scopeisolate3-directive name='{{name}}' ></div>
  </div>
</div>