2013-04-05 48 views
8

Có cách nào để có chế độ xem HTML với các giá trị được điền trước từ máy chủ hay không và sau đó lấy AngularJS để đọc các giá trị đó vào số $scope của nó?Có cách nào để AngularJS hoạt động với HTML trước không?

Tôi đang nghĩ đến một kịch bản mà HTML là như thế này:

<div ng-controller="TestController"> 
    <div ng-bind="title">Test Title</div> 
    <div ng-bind="itemCount">33</div> 
    <div ng-repeat="item in items"> 
     <div ng-bind="item.title">Item 1 Title</div> 
    </div> 
</div> 
<button ng-click="update()">Update</button> 

Và JavaScript là như thế này:

function TestController($scope) { 
    $scope.update = function() { 
     console.log($scope.title); // Should log "Test Title" 
    }; 
} 

Ý tưởng đằng sau này là để cho các máy chủ làm HTML rằng công cụ tìm kiếm có thể lập chỉ mục, nhưng có một số Mô hình trình bày JavaScript của nội dung để thao tác thông qua JS.

Trả lời

0

Thêm ng-init vào các phần tử của bạn với giá trị để nó hoạt động theo cách bạn muốn.

http://docs.angularjs.org/api/ng.directive:ngInit

+0

Điều đó có phù hợp với bộ sưu tập không? Và làm cách nào để giữ cho chế độ xem của tôi được đồng bộ hóa với các bản cập nhật mô hình? –

7

Trong khi ng-init là một trong những giải pháp, nó đòi hỏi bạn phải thiết lập một cách rõ ràng giá trị. Vì vậy, đây là một giải pháp thay thế.

http://plnkr.co/edit/pq8yR9zVOHFI6IRU3Pvn?p=preview

Note: Giải pháp này sẽ không làm việc cho ng-repeat. Chỉ thị luồng kiểm soát không thể được sử dụng với điều này. Nhưng để khai thác thông tin đơn giản từ ng-bind, nó hoạt động khá tốt. Tất cả những gì bạn cần làm là thêm chỉ thị default (mã trong thư mục) vào bất cứ nơi nào bạn đang thực hiện liên kết và nó sẽ trích xuất nội dung văn bản và đẩy nó vào biến phạm vi.

EDIT (giải pháp với ng-repeat):

Vì vậy, tôi đã nghĩ đến việc một cách để làm cho ng-repeat cũng làm việc cùng một cách. Nhưng nhận được ng-lặp lại để làm việc như thế này không phải là một công việc dễ dàng (xem mã cho bằng chứng: P). Cuối cùng tôi đã tìm thấy một giải pháp - ở đây bạn đi:

http://plnkr.co/edit/GEWhCNVMeNVaq9JA2Xm2?p=preview

Có một vài điều bạn cần biết trước khi sử dụng này. Điều này chưa được kiểm tra kỹ lưỡng. Nó chỉ hoạt động để lặp lại trên mảng (không phải đối tượng). Có thể có những trường hợp không được bảo hiểm. Tôi ghi đè chính bản thân mình mà có thể có những hậu quả khác. Khi bạn lặp qua các mục (trong mã phía máy chủ), đừng quên thêm default="true" vào phần tử đầu tiên và default trên phần còn lại của các phần tử.

Hy vọng điều này sẽ hữu ích.

+0

Nó giúp rất nhiều, cảm ơn. Bạn có lời khuyên nào về cách quản lý tình huống 'lặp lại' không? –

+2

Tôi hiện không có giải pháp cho các tình huống có 'ng-repeat' - Sẽ cho bạn biết nếu tôi tìm thấy. – ganaraj

+0

@SebNilsson: Tôi đã cập nhật câu trả lời để bao gồm một plunk khác hỗ trợ 'ng-repeat'. Có một cái nhìn. – ganaraj

0

Tôi nghĩ điều bạn thực sự muốn là làm cho ứng dụng của bạn có thể tìm kiếm được bằng cách phân phát các tệp tĩnh theo cách song song. Đọc thêm về điều này tại đây http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

+3

"Nếu bạn sử dụng Apache ..." - Tôi thì không. Ngoài ra, hash-bangs giết chết mèo con. –