Làm thế nào để sử dụng bộ điều khiển cho hai chỉ thị?

tôi có mã này:Làm thế nào để sử dụng bộ điều khiển cho hai chỉ thị?

JS:

angular.module("module") 
    .controller("fooController", ["$scope", function($scope) { 
    ... 
    }) 
    .directive("foo", function() { 
    return { 
     restrict: "E", 
     controller: "fooController", 
     link: function($scope, $element, $attrs) { 
     // Do some things with the scope of the controller here 
     } 
    } 
    }) 
    .directive("bar", function() { 
    return { 
     restrict: "E", 
     require: "fooController", 
     link: function($scope, $element, $attrs) { 
     // Nothing yet 
     } 
    } 
    });

HTML:

<html> 
    <head> 
    <!-- Scripts here --> 
    </head> 
    <body ng-app="module"> 
    <foo/> 
    <bar/> 
    </body> 
</html>

Chỉ foo công trình, nhưng chỉ thị bar ném một lỗi: No controller: fooController.

Làm cách nào tôi có thể sửa lỗi này trong khi vẫn duy trì cấu trúc hiện tại của mình (Bộ điều khiển không nằm trong HTML, nhưng được sử dụng bởi các chỉ thị, bar nằm ngoài foo và chia sẻ cùng một bộ điều khiển, trong khi cả hai đang sửa đổi phạm vi của nó)? Tôi đọc phần thảo luận here, nhưng tôi không thể hiểu cách thực hiện.

Nguồn

2013-06-05 tgkokk

Chỉ vì tò mò, Tại sao bạn sử dụng cùng một bộ điều khiển cho cả hai chỉ thị? – callmekatootie

Tôi cần chia sẻ một số dữ liệu giữa chúng. Bạn có biết cách tốt hơn để làm điều này không? – tgkokk

Có - Dịch vụ! '$ rootScope' cũng thực hiện thủ thuật nhưng sẽ bị cau mày. http://stackoverflow.com/questions/9293423/can-one-controller-call-another-in-angularjs - đây là tất cả những gì bạn cần biết để giao tiếp giữa các bộ điều khiển. – callmekatootie

Vì mục tiêu cuối cùng của bạn là để giao tiếp giữa bộ điều khiển, bạn không cần phải tái sử dụng bộ điều khiển tương tự trên nhiều chỉ thị (tôi nghi ngờ nếu tái sử dụng sẽ cho phép bạn giao tiếp). Dù sao, cách tốt nhất để đi về nó sẽ là dịch vụ sử dụng.

Điều Can one controller call another? nói về nó một cách chi tiết, nhưng trong thuật ngữ đơn giản, đầu tiên tạo ra một dịch vụ:

app.factory('myService', function() { 
    var data; 
    return { 
     getData: function() { 
      return data 
     }, 
     setData: function (newData) { 
      data = newData; 
     } 
    }; 
});

Sau đó bạn có thể sử dụng dịch vụ này trong bộ điều khiển của bạn và liên lạc với nhau điều khiển bằng cách sử dụng setData() và getData() chức năng của dịch vụ.

Nguồn

2013-06-05 09:09:14 callmekatootie

Bạn không thể yêu cầu bộ điều khiển. Bạn có thể yêu cầu một chỉ thị là một trong những phụ huynh của chỉ thị hiện tại.

<foo> 
     <bar /> 
    </foo> 

    // in foo 
    controller: 'fooController' 
    // in bar 
    require: '^foo' //^means to search it up in the tree

đây thanh có thể yêu cầu foo và nó sẽ có bộ điều khiển foo của: http://jsfiddle.net/Zmetser/kHdVX/ Trong ví dụ này fooController'll được khởi tạo một lần.

<foo /> 
    <bar /> 

    // in foo 
    controller: 'fooController' 
    // in bar 
    controller: 'fooController'

Đây bar và foo có của nó trên thể hiện của các fooController: http://jsfiddle.net/Zmetser/QypXn/

Nguồn

2013-06-05 09:03:00 Oliver

Nhưng yeah, nếu chỉ thị của bạn là anh chị em ruột, dịch vụ là một giải pháp. – Oliver

Giải pháp tốt và tôi chắc chắn sẽ sử dụng nó khi các chỉ thị không phải là anh chị em. Trong trường hợp này, callmekatootie là IMHO tốt hơn. – tgkokk

Làm thế nào để sử dụng bộ điều khiển cho hai chỉ thị?

Trả lời

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