如何将控制器链接到AngularJS中的指令？

Question

假设我有以下HTML结构：

<div ng-app="testApp">
    <div ng-controller="controller1">
        {{controller1}}
    </div>
    <div ng-controller="controller2">
        {{controller2}}
    </div>
    <div ng-controller="controller3">
        {{controller3}}

        <test-directive></test-directive>
    </div>
</div>

在ng-controller="controller3"内，有一个自定义指令。

该指令如下：

ang.directive("testDirective", function() {
    return {
        restrict: 'AE',
        link: function (scope, elem, attrs) {
            console.log(scope);
        },
        template: "<h3>I return $scope.controller3</h3>"
    }
});

$scope现在保存ng-controller="controller3"的数据。 如何将自定义控制器链接到它？所以相反，指令传递了它的父控制器，我想要传递例如 controller1 它的数据。

我必须能够将任何控制器传递给它，因为指令取决于给定控制器中的数据。

我无法替换所需控制器内的<test-directive>

这里有一个你可以玩的小提琴

var ang = angular.module('testApp', []);

ang.controller("controller1", controller1);
function controller1($scope) {
	$scope.controller1 = "controller1";
}

ang.controller("controller2", controller2);
function controller2($scope) {
	$scope.controller2 = "controller2";
}

ang.controller("controller3", controller3);
function controller3($scope) {
	$scope.controller3 = "controller3";
}

ang.directive("testDirective", function() {
	return {
		restrict: 'AE',
		link: function (scope, elem, attrs) {
			console.log(scope);
		},
    template: "<h3>I return $scope.controller3</h3>"
	}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<div ng-app="testApp">
	<div ng-controller="controller1">
		{{controller1}}
	</div>
	<div ng-controller="controller2">
		{{controller2}}
	</div>
	<div ng-controller="controller3">
		{{controller3}}
		
		<test-directive></test-directive>
	</div>
</div>

真实案例场景：

我制作了分页指令。您可以通过在页面上的任何位置放置<ng-pagination></ng-pagination>来调用该指令。

该指令从给定数据集创建分页。然而，数据集可以容纳任何东西。它不依赖于价值观等等。

该指令只有一个要求。如果控制器有一个名为$scope的{​​{1}}，它会查看控制器内部。 $scope.result充满了来自 API 调用的数据。

然后，分页会重新创建$scope.result，每页 10 结果。

我遇到的问题是：object可以在页面的任何位置也可以ng-controller。

我想要的就是这样：
我将数据属性分配给<ng-pagination></ng-pagination>。被叫：[ng-pagination]。然后，您可以将控制器名称传递给它。然后该指令可以访问该控制器内的所有数据。

它会是这样的：
data-controller

更新

我发现您可以通过执行以下操作来分配控制器：

<ng-pagination data-controller="controller1" show-next="true" ...></ng-pagination>

我想，也许这是可能的：

ang.directive("directive", function() {
    return {
        controller: "[CONTROLLER NAME]"
    }
});

然而，它给了我错误：

  

错误：ng：areq Bad Argument
  参数'{​​{controller}}'不是函数，未定义

Answer 1

我正在玩controller，如我的更新中所示，并阅读此guide。我提出了以下解决方案

那么如何将controller传递给directive？

• 您首先必须将scope与scope: {}
隔离开来
• 使用controller: "@"在指令内设置controller属性。您现在可以通过下一步为其分配值
• 设置属性name: "controller"。我将在下面解释如何使用它。

我被告知isolating范围是必要的，但它确实无效。

如果现在放置directive，您现在可以通过执行以下操作为其分配任何控制器：

<ng-pagination data-controller="[CONTROLLER NAME]>

属性name的名称无关紧要。因此，如果您想将其称为assign-any，则可以通过将attribute设置为name来传递name: assignAny。

var ang = angular.module('testApp', []);

ang.controller("controller1", controller1);
function controller1($scope) {
	$scope.controller1 = "Yay, im now part of the directive!!!";
}

ang.controller("controller2", controller2);
function controller2($scope) {
	$scope.controller2 = "controller2";
}

ang.controller("controller3", controller3);
function controller3($scope) {
	$scope.controller3 = "controller3";
}

ang.directive("testDirective", function() {
	return {
		restrict: 'AE',
		link: function (scope, elem, attrs) {
      scope.controller = attrs.controller;
			console.log(scope);
		},
    template: "<h3>I return {{controller}}</h3>",
    controller: "@",
    name: "controller",
	}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<div ng-app="testApp">
	<div ng-controller="controller1">
		{{controller1}}
	</div>
	<div ng-controller="controller2">
		{{controller2}}
	</div>
	<div ng-controller="controller3">
		{{controller3}}
		
		<test-directive data-controller="controller1"></test-directive>
	</div>
</div>

我建议您阅读本指南，了解有关如何使用指令的详细说明。

Part one和Part two