Các thuộc tính phạm vi cô lập được xác định bằng @ không được xác định/biến mất trong chức năng liên kết của chỉ thị

Question

Chỉ thị đã tách biệt phạm vi và các thuộc tính phạm vi đang được chuyển với "@".

Đây là cách chỉ thị được gọi là:

<div ng-init="classForIcon = 'vladClass'"></div> 
<div ng-init="textForIcon = 'Icon\'s text'"></div> 
<div ng-init="routeForIcon = 'www.google.com'"></div> 
<div ng-init="tooltipForIcon = 'my tooltip'"></div> 
<div ng-init="imageForIcon = 'images/HOME_ICON1.png'"></div> 

<rl-icon-widget icon-class="{{classForIcon}}" icon-text = "{{textForIcon}}" icon-tooltip="{{tooltipForIcon}}" icon-route="{{routeForIcon}}" icon-image="{{imageForIcon}}"></rl-icon-widget> 

Đây là cách chỉ thị được định nghĩa:

'sử dụng nghiêm ngặt';

fcPortalApp.directive('rlIconWidget', ['localizationAssistant', function(localizationAssistant) { 
    var obj = { 
     restrict: 'E', 
     templateUrl: 'scripts/directives/rliconwidget/rliconwidget.html', 

     //require: 'ngModel', 
     scope: { 
      //ngModel: '@', 
      iconClass: "@", 
      iconRoute: "@", 
      iconText: "@", 
      iconTooltip: "@", 
      iconImage: "@"   
     }, 

     link: function(scope, element, attrs) { 

      console.log(scope); 
      console.log(scope.iconImage); 
      console.log(scope.iconTooltip); 
      console.log(scope.iconRoute); 

     } 
    }; 

    console.log(obj); 
    return obj; 

}]); 

Khi tôi kiểm tra các đối tượng phạm vi (click vào đầu ra của console.log (scope_ trong firebug), có vẻ như nó đã iconImage, iconTooltip và iconRoute thuộc tính thiết lập một cách chính xác.

Tuy console.log (scope.iconImage), console.log (scope.iconTooltip) và console.log (scope.iconRoute) print "không xác định"

Answer 1

Sử dụng $observe để quan sát sự thay đổi giá trị của thuộc tính có chứa nội suy (ví dụ src="{{bar}}"). Điều này không chỉ hiệu quả mà còn là wa duy nhất y để dễ dàng nhận được giá trị thực tế bởi vì trong giai đoạn liên kết nội suy chưa được đánh giá và vì vậy giá trị tại thời điểm này được đặt thành undefined. - directive doc

Khi bạn kiểm tra thủ công phạm vi, giá trị được xác định.

Lý do chúng tôi cần sử dụng $ quan sát (thực tế $ watch cũng sẽ hoạt động để cô lập các thuộc tính phạm vi được xác định bằng '@') là do chỉ thị có thể cần phải làm điều gì đó bất cứ khi nào giá trị nội suy thay đổi. Ví dụ: nếu giá trị của các thay đổi textForIcon, bạn có thể muốn sửa đổi điều gì đó trong DOM được chỉ thị của bạn quản lý.

Nếu bạn cần các giá trị được xác định khi chức năng liên kết chạy, bạn có hai lựa chọn:

1. Sử dụng '=' thay vì '@'. Điều này sẽ yêu cầu bạn xóa {{}} s khỏi HTML.
2. Nếu các giá trị không thay đổi, hãy chuyển các chuỗi:
   <rl-icon-widget icon-class="vladClass" ...>
   Sau đó, trong chỉ thị của bạn, chỉ cần sử dụng attrs.iconClass - không cần '@'.