AngularJS - Truy cập phạm vi cô lập trong chức năng liên kết của chỉ thị

Question

Tôi đang đưa ra một thử đầu tiên tại AngularJS chỉ thị tùy chỉnh.

Tôi đang gặp sự cố khi sử dụng (hoặc hiểu ...) phạm vi phân lập trong hàm liên kết của chỉ thị.

Đây là mã của phần này của ứng dụng của tôi:

view.html

... 
<raw-data id="request-data" title="XML of the request" data="request">See the request</raw-data> 
... 

request là một biến được công bố trong phạm vi của viewCtrl chứa xml-chuỗi các yêu cầu.

rawData.js

directives.directive('rawData', function() { 

    return { 
     restrict : 'E', 
     templateUrl : 'partials/directives/raw-data.html', 
     replace : true, 
     transclude : true, 
     scope : { 
      id : '@', 
      title : '@', 
      data : '=' 
     }, 
     link : function($scope, $elem, $attr) { 
      console.log($scope.data); //the data is correclty printed 
      console.log($scope.id); //undefined 
     } 
    }; 
}); 

nguyên data.html

<div> 
    <!-- Button to trigger modal --> 
    <a href="#{{id}}Modal" role="button" class="btn" data-toggle="modal" ng-transclude></a> 

    <!-- Modal --> 
    <div id="{{id}}Modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="{{id}}Modal" aria-hidden="true"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h3 id="myModalLabel">{{ title }}</h3> 
     </div> 
     <div class="modal-body"> 
      <textarea class="input-block-level" rows="10">{{ data }}</textarea> 
     </div> 
     <div class="modal-footer"> 
      <!-- <button class="btn" ng-click="toggleTagText('')">{{'cacher'}} l'image</button> --> 
      <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Fermer</button> 
     </div> 
    </div> 
</div> 

Tôi không hiểu tại sao các ID được correclty hiển thị khi pops phương thức, nhưng khi tôi cố gắng console.log() nó, giá trị của nó là không xác định.

Có thể tôi đã sai với giá trị phạm vi bị cô lập (= và @).

Cảm ơn bạn đã đọc. :)

Answer 1

Các thuộc tính phạm vi cách ly được liên kết với @ không có sẵn ngay lập tức trong hàm liên kết. Bạn cần phải sử dụng $observe:

$attr.$observe('id', function(value) { 
    console.log(value); 
}); 

Mẫu của bạn hoạt động đúng vì góc tự động cập nhật cô lập phạm vi tài sản id cho bạn. Và khi cập nhật, mẫu của bạn cũng tự động cập nhật.

Nếu bạn chỉ đi dây, bạn chỉ có thể đánh giá các giá trị một lần thay vì sử dụng @ ràng buộc:

link: function($scope, $elem, $attr) { 
    var id = $attr.id; 
    var title = $attr.title 
    console.log(id, title); 
} 

Tuy nhiên, trong trường hợp của bạn, vì bạn muốn sử dụng các thuộc tính trong mẫu, bạn nên sử dụng @.

Nếu bạn không sử dụng mẫu, thì @ hữu ích khi giá trị thuộc tính chứa {{}} s – ví dụ: title="{{myTitle}}". Sau đó, nhu cầu sử dụng $observe trở nên rõ ràng hơn: hàm liên kết của bạn có thể muốn thực hiện điều gì đó mỗi lần giá trị của myTitle thay đổi.

Answer 2

Điều này là cố ý và phải làm với thứ tự biên dịch và sự khác biệt giữa '@' và '='.

Một số đoạn trích từ this Google Groups discussion with input from Misko:

@ and = do very different things. One copies the attribute value (which may be interpolated) and the other treats the attribute value as an expression.

@attrs are not $interpolated until later, so they are not available at link time. If you want to do something with them in the link function you either need to $interpolate yourself manually

Answer 3

tốt, không ai trong số các câu trả lời ở trên thực sự đề cập đến một khía cạnh quan trọng, ngay cả với '=', nó không có vẻ với tôi, bạn có thể truy cập vào phạm vi bên trong chức năng liên kết trực tiếp như sau,

scope: { 
    data: '=', 
}, 
link: function(scope, elem, attrs) { 
    console.debug(scope.data); // undefined 

nhưng bạn có thể truy cập vào phạm vi trong hàm nội bộ,

link: function(scope, elem, attrs) { 
    scope.saveComment = function() { 
     console.debug(scope.data); 

vì vậy dường như với tôi có thể có thời gian trễ khi scope.data có thể có sẵn.

Answer 4

Bạn có thể ghé thăm các JSFiddle tạo ra bởi tôi ở đây: http://jsfiddle.net/7t984sf9/5/:

link: function($scope, $elem, $attr) { 
    console.log($scope.onewayObject); 
    $attr.$observe('onewayObject', function(value) { 
     console.log(value); 
    }); 
} 

Hoặc một số lời giải thích chi tiết hơn ở đây: What is the difference between & vs @ and = in angularJS