2013-08-26 21 views
12

Tôi không thể gọi một chức năng điều khiển từ bên trong một tùy chỉnh mẫu với ui-typeahead:truy cập phạm vi điều khiển từ Bootstrap-UI Typeahead mẫu

<input typeahead="val for val in autoComplete($viewValue)" 
    typeahead-template-url="searchAutocompleteTpl.html" 
    ng-model="query"/> 

<script type="text/ng-template" id="searchAutocompleteTpl.html"> 
    <span ng-repeat="eqp in match.model.equipment"/> 
    <a href="" ng-click="showItem(eqp.model)"> 
     found in: {{eqp.model}} 
    </a> 
</script> 

Vấn đề là phạm vi của bộ điều khiển có vẻ là vắng mặt trong mẫu:

showItem(eqp.model)

không bao giờ được gọi. Tôi cũng đã thử với:

$parent.showItem(eqp.model)

không có kết quả.

Làm cách nào để gọi hàm/giá trị trên phạm vi của bộ điều khiển?

Trả lời

11

Tôi đã gặp sự cố tương tự và đã xem typeahead code on github để xem liệu có thể cung cấp bất kỳ manh mối nào hay không. Có vẻ như có một số chỉ thị liên quan đến việc tạo danh sách đề xuất và mỗi danh sách đều có phạm vi con riêng.

Nói cách khác, $parent.showItem(eqp.model) là một nỗ lực tốt, nhưng bạn không tăng đủ cấp độ. Có gì làm việc cho tôi là: $parent.$parent.$parent.showItem(eqp.model)

+1

cảm ơn, nhưng bạn có biết tại sao không? và nơi chúng ta có thể thấy rõ ràng về cấu trúc của phạm vi. – Awakening

+0

Mất 4 đô la cho tôi để đến phạm vi ban đầu. – ddalex

+1

Nó phụ thuộc vào cách thức và nơi bạn sử dụng. typeahead rõ ràng giới thiệu một phạm vi cô lập một nơi nào đó có nghĩa là bạn không nhận được để prototypically kế thừa từ phạm vi cha mẹ của riêng bạn. Đây là lý do tại sao bạn phải sử dụng $ parent, được điền bởi góc cạnh ngay cả trong phạm vi cô lập. Nếu bạn đang sử dụng typeahead trong chỉ thị của riêng bạn mà cũng định nghĩa một phạm vi cô lập, thì bạn sẽ cần phải đi lên chuỗi $ parent 4 lần để đến phạm vi cơ sở của bạn. Tất nhiên tại thời điểm này bạn có thể muốn bắt đầu xem xét lại mã của bạn. Điểm của một phạm vi riêng biệt là nó có thể được tái sử dụng bởi vì nó không phụ thuộc vào cha/mẹ. –

1

Các giải pháp của vấn đề của bạn là để bắt đầu một đối tượng trong mẫu phạm vi điều khiển của bạn như thế này:

$scope.typeaheadObject = { 
    query : '', 
} 

tại ở dạng của bạn, bạn sẽ cần phải thay đổi ng-mô hình của bạn với :

ng-model="typeaheadObject.query' 

Điều này sẽ tạo đối tượng typeaheadĐược đưa vào bộ điều khiển của bạn nếu bạn không khởi tạo lại bộ điều khiển. Vì vậy, khi bạn sẽ muốn truy cập vào các nội dung của đối tượng trong một trong những điều khiển này, bạn sẽ chỉ phải làm ví dụ:

console.log($scope.typeaheadObject.query) 

Đây là một vấn đề cổ điển trong angularJs. Bạn chỉ có thể truy cập và sửa đổi phạm vi gốc nếu biến là cổ phiếu trong một đối tượng

Cuối cùng bạn phải sử dụng dấu '.' trong ng-model của bạn. Điều này sẽ cho phép mô-đun ui-bootstrap của bạn và mô-đun của riêng bạn chia sẻ phạm vi của chúng với đối tượng.

Tôi vừa làm một ví dụ về kẻ nói dối để đảm bảo bạn hiểu rõ vấn đề.

http://plnkr.co/edit/4YWNMagm571Gk2DrCERX?p=preview

Chúc một ngày tốt :)

1

Tôi cũng có cùng một vấn đề. Tôi không chắc chắn nhưng nó hoạt động.

Bạn có thể sử dụng đôi $parent thay vì duy nhất.

ví dụ: $parent.$parent.showItem(eqp.model)

1

Nó làm việc cho tôi sau khi thêm 4 cha mẹ. $ parent. $ Parent. $ Parent. $ Parent.

Các vấn đề liên quan