Sự khác biệt giữa nẹp xoăn đôi và đơn trong JS góc cạnh?

192

Tôi chưa quen với thế giới góc cạnh này, tôi hơi bối rối với việc sử dụng dấu ngoặc nhọn {{}} và dấu ngoặc nhọn đơn {} hoặc đôi khi không sử dụng dấu ngoặc nhọn để bao gồm biểu thức như trong các lệnh

ng-class={expression}
normal data binding like{{obj.key}}
ng-hide='mydata==="red"'

angularjs

— Mohamed Hussain
nguồn

279

{{}} - dấu ngoặc kép:

{{}} là các biểu thức góc và khá tiện dụng khi bạn muốn viết nội dung lên HTML:

<div>
    {{planet.name == "Earth" ? "Yeah! We 're home!" : "Eh! Where 're we?"}}
</div>

<!-- with some directives like `ngSrc` -->
<img ng-src="http://www.example.com/gallery/{{hash}}"/>

<!-- set the title attribute -->
<div ng-attr-title="{{celebrity.name}}">...

<!-- set a custom attribute for your custom directive -->
<div custom-directive custom-attr="{{pizza.size}}"></div>

Đừng sử dụng chúng ở một nơi đã là một biểu thức!

Chẳng hạn, lệnh này ngClickcoi bất cứ điều gì được viết ở giữa các trích dẫn là một biểu thức:

<!-- so dont do this! -->
<!-- <button ng-click="activate({{item}})">... -->

{} - niềng răng đơn:

{}như chúng ta biết là viết tắt của các đối tượng trong JavaScript. Ở đây cũng vậy, không có gì khác biệt:

<div ng-init="distanceWalked = {mon:2, tue:2.5, wed:0.8, thu:3, fri:1.5, 
sat:2, sun:3}">

Với một số chỉ thị thích ngClasshoặc ngStylechấp nhận bản đồ:

<span ng-style="{'color' : 'red'}">{{viruses.length}} viruses found!</span>

<div ng-class="{'green' : vegetable == 'lettuce', 
'red' : vegetable == 'tomato'}">..

không có niềng răng xoăn:

Như đã đề cập chỉ đi vô nghĩa khi bên trong biểu thức. Khá đơn giản:

<div ng-if="zoo.enclosure.inmatesCount == 0">
    Alarm! All the monkeys have escaped!
</div>

— Luôn luôn học hỏi
nguồn

2

Chúng ta có thể sử dụng {{}} với chỉ thị ng-include, trong thuộc tính ng-src.

— Jay Shukla

5

Giống như ai đó được đề cập trong các nhận xét, Double niềng răng {{}} được cho là được đặt trong chỉ thị ng-src giữa các trích dẫn. Nhưng tại sao ng-src có thể làm điều đó? Có tên cho loại chỉ thị đặc biệt có {{}} bên trong dấu ngoặc kép không?

— ayjay

Có sự khác biệt nào giữa {{foo-bar}} và "{{foo-bar}}" không?

— aandis

5

Tôi đã phải tự nghiên cứu thêm một chút về điều này để hiểu đầy đủ về nó, nhưng tôi nghĩ bài đăng trên blog này thực sự hữu ích cùng với câu trả lời của @ CodeHater, Tại sao AngularJS đôi khi sử dụng niềng răng đơn {}, đôi khi là niềng răng đôi {{}}, và đôi khi không niềng răng?

— Prancer 18/2/2015

2

một điều nữa về {{}} nó cũng được sử dụng như Watcher .. vui lòng tránh càng nhiều càng tốt để có hiệu suất tốt hơn

— riyas va
nguồn

3

Ý bạn là {{}} làm giảm hiệu suất? Bạn có thể vui lòng cung cấp một nguồn để chứng minh điều đó?

— Don D

1

Ai đó có thể xác nhận điều đó?

— GarfieldKlon

1

Tôi biết đây là một bài viết cũ và có thể hơi lạc đề, nhưng đây là phản hồi của @DonD và @GafrieldKlon ...

Có vẻ như một người theo dõi thực sự được đặt nếu bạn sử dụng ng-bindchỉ thị, không phải khi sử dụng {{}}. Điều đó đang được nói, tôi tin rằng câu trả lời @riyas ở trên vẫn đúng một phần trong đó tránh {{}} nói chung là tốt hơn cho hiệu suất, nhưng không phải vì lý do đã nêu.

Câu trả lời này cho một bài viết khác giải thích điều này chi tiết hơn.

— Tấm ván
nguồn