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

查看:126
本文介绍了如何要求在angularjs指令控制器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

谁能告诉我怎样包括在另一个angularJS指令某个指令指向的控制器。
比如我有以下的code

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.

需要一个控制器

如果你想共享相同的实例的控制器中,然后使用要求

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

要求确保另一指令的presence,然后包括它作为参数传递给链接功能控制器。所以,如果你有一个元素上两个指令,你的指令可以的需要的其他指令的presence并获得它的控制方法。一个常见的​​用例是要求 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, 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.

在两种情况下,你有两项指令一起使用这个工作。 要求是组件之间交流的方式。

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆