如何在 angularjs 指令中要求控制器 [英] How to require a controller in an angularjs directive

问题描述

谁能告诉我如何将一个指令中的控制器包含在另一个 angularJS 指令中.例如我有以下代码

Can anyone tell me how to include a controller from one directive in another angularJS directive. for example I have the following code

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);
        }
    };
});

据我所知，我应该能够访问 addProduct 指令中的控制器，但我不能.有没有更好的方法来做到这一点?

By all account I should be able to access the controller in the addProduct directive but I am not. Is there a better way of doing this?

推荐答案

我很幸运并在对问题的评论中回答了这个问题，但为了完整起见，我发布了一个完整的答案，所以我们可以标记这个问题作为已回答".

I got lucky and answered this in a comment to the question, but I'm posting a full answer for the sake of completeness and so we can mark this question as "Answered".

这取决于你想通过共享控制器来完成什么；您可以共享同一个控制器(尽管有不同的实例)，也可以共享同一个控制器实例.

It depends on what you want to accomplish by sharing a controller; you can either share the same controller (though have different instances), or you can share the same controller instance.

共享控制器

通过将相同的方法传递给两个指令，两个指令可以使用相同的控制器，如下所示:

Two directives can use the same controller by passing the same method to two directives, like so:

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

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

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

每个指令都将获得自己的控制器实例，但这允许您在任意数量的组件之间共享逻辑.

Each directive will get its own instance of the controller, but this allows you to share the logic between as many components as you want.

需要控制器

如果您想共享一个控制器的相同实例，那么您可以使用require.

If you want to share the same instance of a controller, then you use require.

require 确保存在另一个指令，然后将其控制器作为参数包含在链接函数中.因此，如果您在一个元素上有两个指令，您的指令可以要求另一个指令的存在并获得对其控制器方法的访问.一个常见的用例是需要 ngModel.

require ensures the presence of another directive and then includes its controller as a parameter to the link function. So if you have two directives on one element, your directive can require the presence of the other directive and gain access to its controller methods. A common use case for this is to require ngModel.

^require，加上插入符号，除了当前元素之外，还检查指令上面的元素，以尝试找到另一个指令.这允许您创建复杂的组件，其中子组件"可以通过其控制器与父组件进行通信，以达到很好的效果.示例可能包括选项卡，其中每个窗格都可以与整个选项卡通信以处理切换；一套手风琴可以确保一次只打开一个；等

^require, with the addition of the caret, checks elements above directive in addition to the current element to try to find the other directive. This allows you to create complex components where "sub-components" can communicate with the parent component through its controller to great effect. Examples could include tabs, where each pane can communicate with the overall tabs to handle switching; an accordion set could ensure only one is open at a time; etc.

无论哪种情况，您都必须同时使用这两个指令才能使其正常工作.require 是组件间通信的一种方式.

In either event, you have to use the two directives together for this to work. require is a way of communicating between components.

查看指令指南页面了解更多信息:http://docs.angularjs.org/guide/directive

Check out the Guide page of directives for more info: http://docs.angularjs.org/guide/directive

这篇关于如何在 angularjs 指令中要求控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！