2013-05-30 38 views
32

Tôi có nhu cầu kế thừa phạm vi từ bộ điều khiển chính trong chỉ thị. Tôi không nhất thiết muốn rời khỏi phạm vi: sai. Tôi cũng không nhất thiết muốn sử dụng một phạm vi bị cô lập, bởi vì nó đòi hỏi rất nhiều công việc để có được các giá trị mà tôi quan tâm về liên kết đúng (nghĩ nhiều giá trị trong một bộ điều khiển chính).Có thể cập nhật Phạm vi Phụ huynh từ Chỉ thị Góc với phạm vi: đúng không?

Có ý nghĩa khi sử dụng scope:true trong chỉ thị của tôi nếu tôi muốn cập nhật phạm vi gốc không?

<div ng-controller="MyCtrl"> 
     Hello, {{name}}! 
     <my-directive></my-directive> 
</div> 
var myApp = angular.module('myApp',[]); 

//myApp.directive('myDirective', function() {}); 
//myApp.factory('myService', function() {}); 

function MyCtrl($scope) { 
    $scope.name = 'Dave'; 
} 


myApp.directive('myDirective', function() { 
    return { 
     scope: true, 
     restrict: 'EA', 
     link: function(scope, elem, attrs) { 
      scope.updateName = function(newName) { 
       console.log('newName is: ' + newName); 
       scope.name = newName; 
      } 
     }, 
     template: '<input ng-model="updatedName" placeholder="new name value"> <button ng-click="updateName(updatedName)">Update</button>' 
    } 
}) 

Hãy kiểm tra các fiddle

Trả lời

49

Mặc dù @ user1737909 đã tham chiếu câu hỏi SO để đọc (What are the nuances of scope prototypal/prototypical inheritance in AngularJS?, điều này sẽ giải thích vấn đề và đề xuất nhiều cách khác nhau để khắc phục), chúng tôi thường cố gắng trả lời trên SO.

Vì vậy, lý do fiddle của bạn không hoạt động là vì khi một kiểu nguyên thủy (tức là, một chuỗi, số hoặc loại boolean) được ghi vào - ví dụ: scope.name = newName - chữ "viết" luôn đi đến phạm vi/đối tượng cục bộ. Nói cách khác, phạm vi con sẽ có thuộc tính name riêng của nó làm đổ bóng thuộc tính gốc của cùng một tên. Sửa chữa là sử dụng một đối tượng, chứ không phải là một kiểu nguyên thủy, trong phạm vi cha mẹ. Phạm vi con sẽ nhận được một tham chiếu đến đối tượng đó. Bất kỳ ghi vào các thuộc tính đối tượng (cho dù từ cha mẹ hoặc đứa trẻ) sẽ đi đến một đối tượng đó. (Phạm vi con không nhận được đối tượng riêng của mình.)

$scope.obj = {name: 'Dave'}; 

Sau đó, trong chỉ thị của bạn:

scope.obj.name = newName; 

và HTML:

Hello, {{obj.name}}! 

fiddle

+0

chỉ hiểu phần này chứ không phải cách phạm vi hoạt động thường là imho không phải là ý hay. – Ven

+0

Đây là những gì tôi đang tìm kiếm. Đây là mảnh dán nó (hoặc một phần lớn của nó) với nhau. Cảm ơn, Mark cho câu trả lời chi tiết, điều này thực sự tuyệt vời. – binarygiant

+1

Xin lỗi để đào một sợi cũ nhưng, trong material-angular one có thể sử dụng ví dụ mdSelect chỉ thị như thế này: gpothier

15

Phạm vi thừa kế không có nghĩa là thiết lập các giá trị của một đứa trẻ là thiết lập các giá trị của công ty mẹ của nó.

Thay vì thực hiện scope.name = newName trên phạm vi con, thêm phương thức vào phạm vi gốc, sẽ thực hiện cùng một công việc nhưng trên phạm vi gốc và gọi nó từ phạm vi con kể từ khi con kế thừa phương thức này.

+0

Đây là những gì tôi đã làm, nó có vẻ sạch hơn để cung cấp một phương pháp setter hơn cho phép truy cập trực tiếp vào các thuộc tính của phạm vi cha mẹ. – Gruffy

6

Trong vòng của bạn hàm liên kết bạn sẽ viết cho phụ huynh scope (phạm vi toàn cầu "$ scope") như vậy: scope. $ parent.name = newName;

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