javascript - angular指令的隔离作用域问题

Question

 **指令中的scope:{}时不是会创建隔离作用域，指令隔离作用域内不能访问父作用域的属性，然而这个竟然能，望高手指点一二，刚上手angular-----**
 <p ng-init="myProperty = 'wow, this is cool'"></p>
  Surrounding scope: {{ myProperty }}
  <p my-inherit-scope-directive>
    Inside an directive with inherited scope: {{ myProperty }}
    
  </p>
  <p my-directive>
    Inside myDirective, isolate scope: {{ myProperty }} **//这里的myProperty竟然也能访问父作用域的myProperty**
  
   <p>

  <script>
    angular.module('myApp', [])
    .directive('myDirective', function() {
      return {
        restrict: 'A',
        scope: {}
      };
    })
    .directive('myInheritScopeDirective', function() {
      return {
        restrict: 'A',
        scope: true
      };
    })
  </script>

Answer 1

你应该这么写：

//当然html中就不需要写template中的部分了。
.directive('myDirective', function() {
      return {
        restrict: 'A',
        scope: {},
        template:"Inside myDirective, isolate scope: {{ myProperty }}"
      };
    })

按照你的写法，添加了指令的元素并没有按照你的设计被编译。
或者干脆这么写

.directive('mysss', function() {
        return {
            restrict: 'A',
            scope: {},
            replace : true,
            template:"<p>Inside an directive with inherited scope: {{ myProperty }}</p>"
        };
    })
//replace:true时，添加了指令的元素会被template内内容整体替换。