<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div ng-app="myApp" ng-init="someProperty = 'some data'"> <div ng-init="siblingProperty='moredata'"> Inside Div Two: {{ aThirdProperty }} <div ng-init="aThirdProperty = 'data for 3rd property'" ng-controller="SomeController"> Inside Div Three: {{ aThirdProperty }} <div ng-controller="SecondController"> Inside Div Four: <span ng-bind="aThirdProperty"></span> <br> Outside myDirective: {{ myProperty }} <div my-directive ng-init="myProperty = 'wow, this is cool'"> Inside myDirective: {{ myProperty }} </div> </div> </div> </div> <div ng-controller="aaa"> $scope.j2 $scope.j1 {{j2}} {{j1}} <div ng-init="j2='j2'"> <div ng-init="j1='j1'"></div> </div> </div> <h1>隔离作用域</h1> <p>创建具有隔离作用域的指令需要将scope属性设置为一个空对象{}。如果这样做了，指令的模板就无法访问外部作用域了</p> <div ng-controller='MainController'> Outside myDirective: {{ myProperty }} <div my-directive2 ng-init="myProperty = 'wow, this is cool'"> Inside myDirective: {{ myProperty }} </div> </div> </div> <script src="angular.min.js"></script> <script> angular.module('myApp', []).controller('SomeController', function($scope) { }) .controller('SecondController', function($scope) { }) .directive('myDirective', function() { return { restrict: 'A', scope: true } }) .controller('aaa', function($scope) { }) .controller('MainController', function($scope) { }) .directive('myDirective2', function() { return { restrict: 'A', scope: {}, priority: 100, template: '<div>Inside myDirective {{ myProperty }}</div>' }; }); </script> </body> </html>