Question

我有一个指令，我用它来跨多个页面进行相同的搜索过滤。所以该指令将使用一个服务，并获得相当大的代码。因此，我想链接到控制器，而不是让控制器在指令中，如下所示：

.directive('searchDirective', function($rootScope) {
    return { 
        restrict: 'E',
        templateUrl:'searchtemplate.html',
        controller: 'searchCtrl',
        controllerAs: 'search'
    };
});

我还想访问模板中的父范围数据，所以我不想使用隔离范围。

无论如何，我不知道该怎么做。我的指令如下：

<search-directive filter="foo"/>

如何传入filter属性中的值，以便我可以使用$ scope.filter或this.filter在我的控制器中访问它？

如果我使用的是隔离范围，那么它很简单。如果我在同一页面中有控制器，我可以使用$ attrs。但由于我使用其他地方的控制器并且不想要一个孤立的范围，我不确定如何将attrs值输入控制器。

有什么建议吗？

Answer 1

如何使用link函数并将值传递给范围？

return { 
        restrict: 'E',
        templateUrl:'searchtemplate.html',
        controller: 'searchCtrl',
        controllerAs: 'search',
        link: function (scope, element, attr) {
           scope.filter = attr.filter;
      }
    };

Answer 2

searchDirective.js

angular
    .module('searchDirective', []).controller('SearchCtrl', SearchCtrl)
    .directive('SearchDirective', directive);

function directive () {
    var directive = {
        templateUrl:'searchtemplate.html',
        restrict: "E",
        replace: true,
        bindToController: true,
        controller: 'searchCtrl as search',
        link: link,
        scope: { filter:'=' } // <-- like so here
    };
    return directive;
    function link(scope, element, attrs) {}
}

SearchCtrl.$inject = [
    '$scope',
    '$filter'];

function SearchCtrl(
    $scope,
    $filter) {

    /** Init SearchCtrl scope */
    /** ----------------------------------------------------------------- */
    var vs = $scope;
    // ....

另外，我强烈建议您查看这个AngularJS样式指南，如何编写上面的指令也是我如何使用它。 John Papa展示了一些更好的方法：https://github.com/johnpapa/angular-styleguide

<强>指令： https://github.com/johnpapa/angular-styleguide#directives

<强>控制器： https://github.com/johnpapa/angular-styleguide#controllers

Answer 3

翻转bindToController和scope周围的值。

{
    ....
    scope: true,
    bindToController: { filter:'=' } 
    ...
}

我刚刚在周末遇到了同样的问题，并在这里做了一个简单的完整示例：bindToController Not Working? Here’s the right way to use it! (Angular 1.4+)

将指令属性传递给链接控制器？

3 个答案: