2013-05-14 56 views
102

Tôi có một chỉ thị thuộc tính hạn chế như sau:Làm cách nào để chuyển nhiều thuộc tính vào một chỉ thị thuộc tính Angular.js?

restrict: "A" 

tôi cần phải vượt qua trong hai thuộc tính; một số và một hàm/gọi lại, truy cập chúng trong chỉ thị bằng cách sử dụng đối tượng attrs.

Nếu chỉ là một chỉ thị yếu tố, hạn chế với "E" tôi có thể như thế này:

<example-directive example-number="99" example-function="exampleCallback()"> 

Tuy nhiên, vì lý do tôi sẽ không đi vào tôi cần chỉ thị là một chỉ thị thuộc tính.

Làm cách nào để chuyển nhiều thuộc tính vào chỉ thị thuộc tính?

+0

Điều đó tùy thuộc vào loại phạm vi mà chỉ thị của bạn tạo (nếu có). Các lựa chọn là: không có phạm vi mới (mặc định, hoặc rõ ràng với 'phạm vi: false'), phạm vi mới (với thừa kế nguyên mẫu bình thường, tức là' phạm vi: true'), và cô lập phạm vi (tức là, 'phạm vi: {...} '). Loại chỉ thị của bạn tạo ra loại phạm vi nào? –

+1

@MarkRajcok Nó có một phạm vi cô lập. – Undistraction

Trả lời

187

Chỉ thị có thể truy cập bất kỳ thuộc tính được xác định trên cùng một nguyên tố, ngay cả khi thị bản thân không phải là phần tử.

mẫu:

<div example-directive example-number="99" example-function="exampleCallback()"></div> 

Chỉ thị:

app.directive('exampleDirective ', function() { 
    return { 
     restrict: 'A', // 'A' is the default, so you could remove this line 
     scope: { 
      callback : '&exampleFunction', 
     }, 
     link: function (scope, element, attrs) { 
      var num = scope.$eval(attrs.exampleNumber); 
      console.log('number=',num); 
      scope.callback(); // calls exampleCallback() 
     } 
    }; 
}); 

fiddle

Nếu giá trị của thuộc tính example-number sẽ được mã hóa cứng, tôi đề nghị sử dụng $eval một lần, và lưu trữ giá trị. Biến số num sẽ có loại chính xác (số).

+0

Tôi đã chỉnh sửa HTML mẫu để sử dụng trường hợp con rắn. Tôi biết tôi không thể sử dụng nó như là một yếu tố. Đó là điểm của câu hỏi. – Undistraction

+0

@Pedr, vâng, xin lỗi tôi đọc quá nhanh về việc sử dụng phần tử. Tôi đã cập nhật câu trả lời, lưu ý rằng bạn cũng cần sử dụng trường hợp con rắn cho các thuộc tính. –

+0

Không sao cả. Cảm ơn câu trả lời của bạn. Tôi đã chỉnh sửa tên thuộc tính để sử dụng trường hợp con rắn. Bạn OK nếu tôi loại bỏ nó từ câu trả lời của bạn vì nó chỉ là một lỗi ngớ ngẩn của tôi và phân tâm từ điểm của câu hỏi và câu trả lời thực tế? – Undistraction

18

Bạn thực hiện chính xác như cách bạn làm với chỉ thị phần tử. Bạn sẽ có chúng trong đối tượng attrs, mẫu của tôi có chúng hai chiều ràng buộc thông qua phạm vi cô lập nhưng đó là không cần thiết. Nếu bạn đang sử dụng một phạm vi riêng biệt, bạn có thể truy cập các thuộc tính với scope.$eval(attrs.sample) hoặc chỉ đơn giản là scope.sample, nhưng chúng có thể không được xác định khi liên kết tùy thuộc vào tình huống của bạn.

app.directive('sample', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      'sample' : '=', 
      'another' : '=' 
     }, 
     link: function (scope, element, attrs) { 
      console.log(attrs); 
      scope.$watch('sample', function (newVal) { 
       console.log('sample', newVal); 
      }); 
      scope.$watch('another', function (newVal) { 
       console.log('another', newVal); 
      }); 
     } 
    }; 
}); 

sử dụng như:

<input type="text" ng-model="name" placeholder="Enter a name here"> 
<input type="text" ng-model="something" placeholder="Enter something here"> 
<div sample="name" another="something"></div> 
3

Điều này phù hợp với tôi và tôi nghĩ HTML5 tương thích hơn. Bạn nên thay đổi html của bạn để sử dụng tiền tố 'đĩa dữ liệu'

<div data-example-directive data-number="99"></div> 

Và trong vòng chỉ thị đọc giá trị của biến:

scope: { 
     number : "=", 
     .... 
    }, 
7

Bạn có thể vượt qua một đối tượng như thuộc tính và đọc nó vào chỉ thị như thế này :

<div my-directive="{id:123,name:'teo',salary:1000,color:red}"></div> 

app.directive('myDirective', function() { 
    return {    
     link: function (scope, element, attrs) { 
      //convert the attributes to object and get its properties 
      var attributes = scope.$eval(attrs.myDirective);  
      console.log('id:'+attributes.id); 
      console.log('id:'+attributes.name); 
     } 
    }; 
}); 
0

Nếu bạn "yêu cầu" 'exampleDirective' từ chỉ thị khác + logic của bạn là trong điều khiển 'exampleDirective của' (giả sử 'exampleCtrl'):

0.123.
app.directive('exampleDirective', function() { 
    return { 
     restrict: 'A', 
     scope: false, 
     bindToController: { 
      myCallback: '&exampleFunction' 
     }, 
     controller: 'exampleCtrl', 
     controllerAs: 'vm' 
    }; 
}); 
app.controller('exampleCtrl', function() { 
    var vm = this; 
    vm.myCallback(); 
}); 
Các vấn đề liên quan