Chỉ thị AngularJS - Phạm vi biệt lập và Phạm vi kế thừa

Question

Tôi đã cố gắng hiểu sự khác biệt giữa phạm vi bị cô lập và phạm vi kế thừa trong chỉ thị. Đây là một ví dụ tôi đã chuẩn bị để làm cho bản thân mình hiểu:

HTML

<div ng-controller="AppController"> 
    <div my-directive> 
     Inside isolated scope directive: {{myProperty}} 
    </div> 

    <div my-inherit-scope-directive> 
     Inside inherited scope directive: {{myProperty}} 
    </div> 
</div> 

Các JS

angular.module("myApp", []) 
     .directive("myInheritScopeDirective", function() { 
      return { 
       restrict: "A", 
       scope: true 
      }; 
     }) 
     .directive("myDirective", function() { 
      return { 
       restrict: "A", 
       scope: {} 
      }; 
     }) 
     .controller("AppController", ["$scope", function($scope) { 
      $scope.myProperty = "Understanding inherited and isolated scope"; 
     }]); 

Thực thi mã với góc-1.1.5, nó hoạt động như Tôi mong đợi: {{myProperty}} bên trong chỉ thị của tôi sẽ là undefined vì phạm vi bị cô lập, trong khi chỉ thị phạm vi kế thừa của tôi, {{myProperty}} sẽ có giá trị Understanding inherited and isolated scope.

Nhưng thực hiện với Angular-1.2.1, trong cả chỉ thị {{myProperty}} kết quả đầu ra Understanding inherited and isolated scope.

Mọi thứ tôi bị thiếu?

Answer 1

Nút văn bản bên trong chỉ thị của bạn bị ràng buộc với phạm vi bộ điều khiển. Do đó phạm vi của chỉ thị không có hiệu lực. Tôi nghĩ rằng điều này có changed kể từ v1.2. Bạn phải sử dụng mẫu cho chỉ thị của mình:

.directive("myIsolatedDirective", function() { 
    return { 
     template: 'Inside isolated in template scope directive: {{myProperty}}', 
     restrict: "A", 
     scope: { 
      myProperty: '=' 
     } 
    }; 
}) 

Kiểm tra this fiddle.