Cách yêu cầu bộ điều khiển trong chỉ thị anglejs

Question 1

Bất cứ ai có thể cho tôi biết làm thế nào để bao gồm một bộ điều khiển từ một chỉ thị trong một chỉ thị angleJS khác. ví dụ tôi có đoạn mã sau

var app = angular.module('shop', []).
config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/js/partials/home.html'
    })
        .when('/products', {
        controller: 'ProductsController',
        templateUrl: '/js/partials/products.html'
    })
        .when('/products/:productId', {
        controller: 'ProductController',
        templateUrl: '/js/partials/product.html'
    });
}]);

app.directive('mainCtrl', function () {
    return {
        controller: function ($scope) {}
    };
});

app.directive('addProduct', function () {
    return {
        restrict: 'C',
        require: '^mainCtrl',
        link: function (scope, lElement, attrs, mainCtrl) {
            //console.log(cartController);
        }
    };
});

Bằng tất cả tài khoản, tôi sẽ có thể truy cập bộ điều khiển trong chỉ thị addProduct nhưng tôi thì không. Có cách nào tốt hơn để làm điều này không?

Question 2

Tôi đã may mắn và đã trả lời câu hỏi này trong một nhận xét cho câu hỏi, nhưng tôi đang đăng một câu trả lời đầy đủ vì mục đích đầy đủ và vì vậy chúng tôi có thể đánh dấu câu hỏi này là "Đã trả lời".

Nó phụ thuộc vào những gì bạn muốn hoàn thành bằng cách chia sẻ một bộ điều khiển; bạn có thể chia sẻ cùng một bộ điều khiển (mặc dù có các phiên bản khác nhau) hoặc bạn có thể chia sẻ cùng một phiên bản bộ điều khiển.

Chia sẻ một bộ điều khiển

Hai chỉ thị có thể sử dụng cùng một bộ điều khiển bằng cách truyền cùng một phương thức cho hai chỉ thị, như sau:

app.controller( 'MyCtrl', function ( $scope ) {
  // do stuff...
});

app.directive( 'directiveOne', function () {
  return {
    controller: 'MyCtrl'
  };
});

app.directive( 'directiveTwo', function () {
  return {
    controller: 'MyCtrl'
  };
});

Mỗi chỉ thị sẽ nhận được thể hiện riêng của bộ điều khiển, nhưng điều này cho phép bạn chia sẻ logic giữa bao nhiêu thành phần tùy thích.

Yêu cầu một bộ điều khiển

Nếu bạn muốn chia sẻ cùng một phiên bản của bộ điều khiển, thì bạn sử dụng require.

requiređảm bảo sự hiện diện của một chỉ thị khác và sau đó bao gồm bộ điều khiển của nó làm tham số cho hàm liên kết. Vì vậy, nếu bạn có hai chỉ thị trên một phần tử, chỉ thị của bạn có thể yêu cầu sự hiện diện của chỉ thị kia và có quyền truy cập vào các phương thức điều khiển của nó. Một trường hợp sử dụng phổ biến cho điều này là yêu cầu ngModel.

^require, với việc thêm dấu mũ, kiểm tra các phần tử ở trên chỉ thị ngoài phần tử hiện tại để cố gắng tìm chỉ thị khác. Điều này cho phép bạn tạo các thành phần phức tạp nơi "các thành phần con" có thể giao tiếp với thành phần mẹ thông qua bộ điều khiển của nó để tạo ra hiệu quả lớn. Ví dụ có thể bao gồm các tab, trong đó mỗi ngăn có thể giao tiếp với các tab tổng thể để xử lý chuyển đổi; một bộ đàn accordion có thể đảm bảo chỉ có một cái được mở tại một thời điểm; Vân vân.

Trong cả hai trường hợp, bạn phải sử dụng hai chỉ thị cùng nhau để điều này hoạt động. requirelà một cách giao tiếp giữa các thành phần.

Xem trang Hướng dẫn của các chỉ thị để biết thêm thông tin: http://docs.angularjs.org/guide/directive

Question 3

Có một câu trả lời hay về stackoverflow ở đây bởi Mark Rajcok:

Bộ điều khiển chỉ thị AngularJS yêu cầu bộ điều khiển chỉ thị mẹ?

với một liên kết đến jsFiddle rất rõ ràng này: http://jsfiddle.net/mrajcok/StXFK/

<div ng-controller="MyCtrl">
    <div screen>
        <div component>
            <div widget>
                <button ng-click="widgetIt()">Woo Hoo</button>
            </div>
        </div>
    </div>
</div>

JavaScript

var myApp = angular.module('myApp',[])

.directive('screen', function() {
    return {
        scope: true,
        controller: function() {
            this.doSomethingScreeny = function() {
                alert("screeny!");
            }
        }
    }
})

.directive('component', function() {
    return {
        scope: true,
        require: '^screen',
        controller: function($scope) {
            this.componentFunction = function() {
                $scope.screenCtrl.doSomethingScreeny();
            }
        },
        link: function(scope, element, attrs, screenCtrl) {
            scope.screenCtrl = screenCtrl
        }
    }
})

.directive('widget', function() {
    return {
        scope: true,
        require: "^component",
        link: function(scope, element, attrs, componentCtrl) {
            scope.widgetIt = function() {
                componentCtrl.componentFunction();
            };
        }
    }
})


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

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