javascript - 如何将 Controller 链接到 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" 的数据. 我如何将一个自定义 Controller 链接到它？所以指令传递它的父 Controller ，我也想传递它的数据，例如 controller1。

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

我无法替换 <test-directive>在所需的 Controller 内

这里有一个你可以玩的 fiddle

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> 来调用该指令页面上的任意位置。

该指令根据给定数据集创建分页。然而，数据集可以容纳任何东西。它不依赖于值(value)观或其他任何东西。

指令只有一个要求。如果它有 $scope，它会在 Controller 内部查找称为 $scope.result . $scope.result从 API 调用中获取数据。

然后分页重新创建一个 object每页 10 个结果。

我遇到的问题是:ng-controller可以在页面的任何位置也可以是 <ng-pagination></ng-pagination> .

我想要实现的是这样的:
我为 [ng-pagination] 分配了一个数据属性 .被称为:data-controller .然后您可以将 Controller 名称传递给它。然后该指令可以访问该 Controller 内的所有数据。

它看起来像这样:
<ng-pagination data-controller="controller1" show-next="true" ...></ng-pagination>

---

更新

我发现您可以通过以下方式分配 Controller :

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

不过，也许这是可能的:

ang.directive("directive", function() {
    return {
        controller: "{{controller}}",
        link: function (scope, elem, attrs) {
            $scope.controller = "[CONTROLLER NAME]"
        }
    }
});

但是，它给了我错误:

Error: ng:areq Bad Argument
Argument '{{controller}}' is not a function, got undefined

Answer 1

我在玩 controller正如我在更新中看到的那样，阅读这篇 guide .我想出了以下解决方案

那么你怎么能传递任何controller到 directive ?

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

有人告诉我isolating作用域是必需的，但它确实可以在没有作用域的情况下工作。

如果您现在放置 directive您现在可以通过以下方式为其分配任何 Controller :

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

属性(property)名称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