Làm cách nào để chia sẻ phạm vi giữa hai chỉ thị trong AngularJS?

Question

Tôi muốn chia sẻ $scope giữa hai chỉ sau:

One23SRCApp.directive('directive1',function() { 
    return { 
     restrict: "A", 
     scope:true, 
     link: function (scope, element, attrs) { 
      scope.tablename = "table"; 
     } 
    }; 
}); 


One23SRCApp.directive('directive2',function() { 
    return { 
     restrict: "A", 
      link: function (scope, element, attrs) { 
      var tablename = scope.tablename; 
     } 
    }; 
}) 

Trong HTML, tôi có:

<input type="text" directive2 placeholder="Search Models..."> 

<table directive1> 
    <tr> 
    <td>column1</td> 
    <td>column1</td> 
    </tr> 
</table> 

Tôi đã tạo ra các chỉ thị có tên là "directive1" với phạm vi cô lập, giao đặt tên "bảng" cho thuộc tính scope.tablename. Tôi không thể truy cập thuộc tính phạm vi này trong chỉ thị khác.

Vậy làm cách nào tôi có thể truy cập phạm vi của một chỉ thị này trong chỉ thị khác?

Answer 1

Bạn có thể thực hiện $rootScope.$broadcast trên các mục bạn cần đồng bộ hóa theo chỉ thị.

Hoặc bạn có thể chuyển đối tượng cho phạm vi được cô lập directive1 của bạn, phạm vi sẽ hoạt động như một cơ chế giao tiếp. Trên đối tượng này nếu bạn thay đổi thuộc tính phụ như tablename, điều đó sẽ ảnh hưởng đến phạm vi gốc.

Something như

One23SRCApp.directive('directive1',function() { 
    return { 
     restrict: "A", 
     scope:{tableconfig:'='}, 
     link: function (scope, element, attrs) { 
      scope.tableconfig.tablename= "table"; 
     } 
    }; 
}); 


One23SRCApp.directive('directive2',function() { 
    return { 
     restrict: "A", 
      link: function (scope, element, attrs) { 
      var tablename = scope.tableconfig.tablename; 
     } 
    }; 
}) 

HTML trở nên

<table directive1 tableconfig='tableconfig'> 
    <tr> 
    <td>column1</td> 
    <td>column1</td> 
    </tr> 
</table> 

điều khiển của bạn nên có đối tượng này được xác định

$scope.tableconfig={};

Answer 2

Đề xuất của tôi sẽ là sử dụng tài nguyên được chia sẻ, ví dụ: một dịch vụ. Dịch vụ là đơn, nghĩa là chỉ có một cá thể của mỗi dịch vụ, vì vậy bạn có thể sử dụng chúng để chia sẻ dữ liệu giữa các chỉ thị, bộ điều khiển, phạm vi và thậm chí khi thay đổi trang thông qua định tuyến.

Bạn sẽ xác định các dịch vụ tài nguyên như thế này:

app.factory("MyResource",function(){ 
    return {}; 
}); 

Sau đó, bạn có thể tiêm dịch vụ đó vào chỉ thị của bạn (và các bộ điều khiển nếu cần thiết) và sử dụng nó như thế này.

One23SRCApp.directive('directive1', ['MyResource', function(MyResource) { 
    return { 
     restrict: "A", 
     scope:true, 
     link: function (scope, element, attrs) { 
      var resource = MyResource; 
      resource.name = 'Foo'; 
     } 
    }; 
}); 
One23SRCApp.directive('directive2', ['MyResource', function(MyResource) { 
    return { 
     restrict: "A", 
     link: function (scope, element, attrs) { 
      var resource = MyResource; 
      console.log(resource.name); 
     } 
    }; 
}); 

Chỉ thị2 sẽ ghi 'Foo' kể từ khi tài nguyên được chia sẻ. Mặc dù đảm bảo rằng các chỉ thị của bạn được chạy theo đúng thứ tự!

**

Bạn cũng có thể làm một hai cách liên kết dữ liệu từ mỗi chỉ vào phạm vi cha mẹ (xem câu trả lời cho điều đó Chandermani), nhưng ở trên là một cách rất hữu ích và mạnh mẽ để có được dữ liệu mà bạn cần nó mà không cần phải phát hoặc theo dõi chính xác vị trí của mọi thứ trong html.

Chỉnh sửa: Mặc dù ở trên rất hữu ích khi chia sẻ thông tin giữa bộ điều khiển và tuyến đường, hãy xem câu trả lời stevuu. Nó có vẻ tốt hơn cho các chỉ thị (mặc dù tôi đã không thử nó).

Answer 3

AngularJS hỗ trợ bộ điều khiển chỉ thị, là bộ điều khiển được chia sẻ giữa nhiều lệnh yêu cầu cùng một bộ điều khiển.Điều này cho phép bạn truy cập và sửa đổi tableConfig trong bất kỳ chỉ thị nào yêu cầu bộ điều khiển đó, mà không phải khai báo một dịch vụ hoặc sự kiện riêng biệt. Để biết thêm thông tin, hãy xem "Tạo Chỉ thị Giao tiếp" trong directives documentation.

Đây là cách hoạt động của ngModel và ngForm.

Answer 4

Mẫu của Chandermani đang hoạt động. Tuy nhiên theo cách này bạn vẫn phải gán thuộc tính trên chỉ thị của bạn và nó không bị cô lập nữa. Đây là một ô nhiễm trên phạm vi ...

Lời khuyên của tôi là chia sẻ phạm vi cô lập của bạn bằng cách sử dụng bộ điều khiển truyền nó theo cách này. Ngôi nhà của bạn, mã của bạn! Hãy suy nghĩ trước khi bạn viết mã nhưng hầu hết tất cả ... ENJOY!

One23SRCApp.directive('directive1',function() { 
    return { 
     restrict: "A", 
     scope: true, 
     controller : function($scope){ 
       $scope.tableconfig= {}; 
       this.config = function(){ 
        return $scope.tableconfig; 
       } 
     }, 
     link: function (scope, element, attrs) { 
      scope.tableconfig.tablename= "table"; 
     } 
    } 
}); 


One23SRCApp.directive('directive2',function() { 
    return { 
      restrict: "A", 
      //^ -- Look for the controller on parent elements, not just on the local scope 
      //? -- Don't raise an error if the controller isn't found 
      require: "^directive1", 
      link: function (scope, element, attrs) { 
       var tablename = scope.config().tablename; 
      } 
    } 
}); 

Cách sử dụng

<!-- Notice, no need to share a scope as attribute --> 
<div directive1> 
    <div directive2> 
    </div> 
</div>