AngularJS: Sự khác biệt giữa = & @ trong phạm vi chỉ thị? [bản sao]

110
Shaun Luttin 2014-02-12 10:18.

Tạo một phạm vi cô lập bên trong một chỉ thị cho phép chúng ta lập bản đồ phạm vi bên ngoài với phạm vi bên trong . Chúng tôi đã thấy sáu cách khác nhau để ánh xạ tới các phần tử:

  1. = attr
  2. & attr
  3. @attr
  4. =
  5. &
  6. @

Mỗi tùy chọn ánh xạ phạm vi này làm gì?

2 answers

200
Jeremy Likness 2014-02-12 12:58.

Điều này có thể gây nhầm lẫn nhưng hy vọng một ví dụ đơn giản sẽ làm rõ điều đó. Đầu tiên, hãy tách các ràng buộc mô hình khỏi các hành vi.

Đây là một mẹo nhỏ sẽ giúp gắn kết mọi thứ với nhau: http://jsfiddle.net/jeremylikness/3pvte/

Và được giải thích ... nếu chỉ thị của bạn trông giống như sau:

<my-directive target="foo"/> 

Sau đó, bạn có những khả năng sau cho phạm vi:

{ target : '=' } 

Điều này sẽ liên kết scope.target (chỉ thị) với $scope.foo (outer scope). This is because = is for two-way binding and when you don't specify anything, it automatically matches the name on the inner scope to the name of the attribute on the directive. Changes to scope.target will update $phạm vi.foo.

{ bar : '=target' } 

Điều này sẽ liên kết scope.bar với $scope.foo. This is because again we specify two-way binding, but tell the directive that what is in the attribute "target" should appear on the inner scope as "bar". Changes to scope.bar will update $phạm vi.foo.

{ target : '@' } 

Điều này sẽ đặt scope.target thành "foo" vì @ có nghĩa là "hiểu theo nghĩa đen". Các thay đổi đối với scope.target sẽ không phổ biến bên ngoài chỉ thị của bạn.

{ bar : '@target' } 

Điều này sẽ đặt scope.bar thành "foo" vì @ lấy giá trị của nó từ thuộc tính đích. Các thay đổi đối với scope.bar sẽ không có hiệu lực bên ngoài chỉ thị của bạn.

Bây giờ chúng ta hãy nói về các hành vi. Giả sử phạm vi bên ngoài của bạn có điều này:

$scope.foo = function(parm1, parm2) { console.log(parm1 + ": " + parm2); } 

Có một số cách bạn có thể truy cập vào điều này. Nếu HTML của bạn là:

<my-directive target='foo'>

Sau đó

{ target : '=' } 

Sẽ cho phép bạn gọi scope.target (1,2) từ chỉ thị của bạn.

Điều tương tự,

{ bar : '=target' }

Cho phép bạn gọi scope.bar (1,2) từ chỉ thị của bạn.

Cách phổ biến hơn là thiết lập đây như một hành vi. Về mặt kỹ thuật, dấu và đánh giá một biểu thức trong ngữ cảnh gốc. Đó là quan trọng. Vì vậy, tôi có thể có:

<my-directive target="a+b" />

Và nếu phạm vi gốc có $ scope.a = 1 và $ scope.b = 2, thì trên chỉ thị của tôi:

{ target: '&' } 

Tôi có thể gọi scope.target () và kết quả sẽ là 3. Điều này rất quan trọng - ràng buộc được hiển thị như một hàm đối với phạm vi bên trong nhưng chỉ thị có thể liên kết với một biểu thức.

Một cách phổ biến hơn để làm điều này là:

<my-directive target="foo(val1,val2)"> 

Sau đó, bạn có thể sử dụng:

{ target: '&' }

Và gọi từ chỉ thị:

scope.target({val1: 1, val2: 2}); 

Thao tác này đưa đối tượng bạn đã truyền, ánh xạ các thuộc tính thành các tham số trong biểu thức được đánh giá và sau đó gọi hành vi, trường hợp này gọi $ scope.foo (1,2);

Bạn cũng có thể làm điều này:

<my-directive target="foo(1, val)"/>

Điều này khóa tham số đầu tiên vào chữ 1 và từ chỉ thị:

{ bar: '&target' }

Sau đó:

scope.bar(5) 

Mà sẽ gọi $ scope.foo (1,5);

47
Shaun Luttin 2014-02-12 12:17.

Tóm lược

  1. @attr liên kết với giá trị chuỗi được đánh giá của thuộc tính DOM phù hợp .
  2. = attr liên kết với phạm vi một khớp DOM thuộc tính của tài sản .
  3. & attr liên kết với chức năng phạm vi của thuộc tính DOM phù hợp .
  4. @
  5. =
  6. &

Chúng tôi sử dụng 4, 5 và 6 nếu tên của thuộc tính DOM đích khớp với tên proprty phạm vi cô lập. Đây là một công tác fiddle của ví dụ sau.

Html

<div ng-app='isolate'>
     <h3>Outer Scope</h3>

    <input type="text" ng-model="myModel" />
    <p>msg: {{ msg }}</p>
     <h3>Inner Scope</h3>

    <div id="inner">
        <div my-directive at="{{ myModel }}" equals="myModel" ampersand="msg=msg+'click'"></div>
    </div>
</div>

Javascript

angular.module('isolate', [])
    .directive('myDirective', function () {
    return {
        template:
            '<label>@attr</label><input value="{{ myAt }}" />' +
            '<label>@</label><input value="{{ at }}" />' +
            '<label>=attr</label><input ng-model="myEquals" />' +
            '<label>=</label><input ng-model="equals" />' +
            '<label>&attr</label><input type="button" ng-click="myAmpersand()" value="Btn" />' +
            '<label>&</label><input type="button" ng-click="ampersand()" value="Btn" />',
        scope: {
            myAt: '@at',
            myEquals: '=equals',
            myAmpersand: '&ampersand',
            at: '@',
            equals: '=',
            ampersand: '&'
        }
    };
});

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Làm thế nào để xây dựng một quả địa cầu từ Scratch

Làm thế nào để xây dựng một quả địa cầu từ Scratch

Thời gian, sự kiên nhẫn, thời gian, sự cống hiến và thời gian chỉ là một vài trong số những thứ mà Peter Bellerby cần để thành lập và sau đó điều hành Bellerby & Co. Globemakers, một trong những công ty duy nhất trên Trái đất vẫn sản xuất các quả địa cầu bằng tay.

Năm giai đoạn đau buồn sau khi mất việc làm

Năm giai đoạn đau buồn sau khi mất việc làm

Đó là một ngày thứ Bảy, máy bay của tôi hạ cánh, và tôi đã sẵn sàng để thư giãn trong một kỳ nghỉ cuối tuần ngắn ngủi, khi một email đến trên điện thoại của tôi. Tôi đã mất việc.

Giữ an toàn cho danh tính của bạn với một cảnh báo đóng băng hoặc gian lận tín dụng

Giữ an toàn cho danh tính của bạn với một cảnh báo đóng băng hoặc gian lận tín dụng

Nếu bạn đã từng bị đánh cắp danh tính của mình, bạn biết đó là một trải nghiệm đáng sợ và căng thẳng. Một cách không phổ biến để ngăn chặn nó? Tín dụng bị đóng băng.

Buổi ra mắt phần 3 của The Good Place có một học sinh mới: Khán giả

Buổi ra mắt phần 3 của The Good Place có một học sinh mới: Khán giả

Eleanor (Kristen Bell) dường như đã tình nguyện cho chúng tôi làm vật tưởng nhớ. NBC's The Good Place là một chương trình thích thử thách tốt.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language