Quan sát biểu thức từ bên trong một chỉ thị

Question

Về cơ bản, làm cách nào tôi có thể nghe các thay đổi trong biểu thức từ trong chỉ thị?

---

Tôi đang sử dụng không có giấy tờ ng-required có điều kiện đòi hỏi một lĩnh vực nhất định:

<input type="checkbox" ng-model="partner" checked /> 
<input ng-model="partnerName" placeholder="required" ng-required="partner" /> 

này hoạt động tuyệt vời (here's the Plunkr). Vấn đề duy nhất với điều này là nó giữ các văn bản "yêu cầu" placeholder, bất kể nó thực sự cần thiết.

---

Vì vậy, tôi quyết định tạo chỉ thị của riêng mình. Đây là cách nó nên làm việc:

<input ng-placeholder="{ 'required': partner }" /> 

Ý tưởng là tương tự như của góc ng-class, nhưng tôi không có cách nào làm thế nào để thực hiện điều này. Đây là những gì tôi đã có cho đến nay:

app.directive('ngPlaceholder', function ($parse) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      console.log(scope.$eval(attrs.ngPlaceholder)); 
     } 
    } 
}); 

mà ghi một đối tượng tốt đẹp mà tôi có thể sử dụng để xác định giá trị placeholder:

{ required: true } 

nhưng làm thế nào để sau đó treo vào chu kỳ $digest/$apply để cập nhật thuộc tính placeholder bất cứ khi nào partner thay đổi?

Answer 1

Đây có phải là những gì bạn muốn không? plunker

ý tưởng cơ bản cho chức năng liên kết của bạn nên được như thế

link: function (scope, element, attrs) { 
     scope.$watch(attrs.xngPlaceholder, function (newVal, oldVal, scope) { 
      element.removeAttr('placeholder'); 
      var att = ''; 
      angular.forEach(newVal, function (elm, key) 
       att += elm ? (key + ' ') : ''; 
      }); 
      element.attr('placeholder', att); 
     }, true); 
    } 

Answer 2

Một cách tiếp cận khác, mà không đòi hỏi một chỉ thị:

placeholder="{{{true: 'required', false:''}[partner]}}" 

Trên đây tạo ra đối tượng {true: 'required', false:''} và sau đó chỉ vào đối tượng sử dụng giá trị hiện tại của partner.