AngularJS 指令通信和页面模板 - 内部指令不起作用答案

【问题标题】：AngularJS directive communication and page template - inner directive doesn't workAngularJS 指令通信和页面模板 - 内部指令不起作用
【发布时间】：2013-10-09 22:52:54
【问题描述】：

在指令通信方面遇到一些问题，尤其是内部和外部自定义标签。

所以，我有以下 HTML 代码：

<html>
<title>Directives</title>
<head lang="en">
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js" type="text/javascript"></script>
<script src="main.js"></script>
</head>
<body ng-app="app">
    <outer>
        <inner></inner>
    </outer>
</body>
</html>

我的 AngularJS 指令有以下 JavaScript 代码：

var app = angular.module("app", []);

app.directive("outer", function() {
    return {
        template: "<div>This is outer message</div>",
        restrict: "E",
        replace: false,
        controller: function() {
            this.say = function(message) {
                console.log(message);
            }
        }
    }
});

app.directive("inner", function() {
    return {
        restrict: "E",
        require: "^outer",
        replace: false,
        controller: function($scope) {},
        link: function(scope, element, attrs, outerCtrl) {
            outerCtrl.say("This is inner message");
        }
    }
});

看起来很简单。我想在屏幕上显示一条消息，在控制台记录器中显示另一条消息。但是直到我评论template: "<div>This is outer message</div>" 行，第二个才出现！我想这个问题与页面渲染（链接和编译功能）有关。实际上我对此感到困惑，我无法修复此错误。谁能帮帮我？

【问题讨论】：

标签： javascript html angularjs angularjs-directive

【解决方案1】：

如果你提供一个模板，它将替换<outer>的内容（replace选项只控制<outer>标签是否也被替换）。

因此，<inner> 指令不再链接。如果您想在仍然链接内部标签的同时提供模板。您需要使用嵌入：

app.directive("outer", function() {
    return {
        template: "<div>This is outer message <div ng-transclude></div></div>",
        restrict: "E",
        replace: false,
        transclude: true,
        controller: function() {
            this.say = function(message) {
                console.log(message);
            }
        }
    }
});

这将用ng-transclude 将inner 插入到div 中。

【讨论】：

【解决方案2】：

您偶然发现了自己问题的答案。 outer 指令的 template 选项将替换元素

<outer>
  <inner></inner>
<outer>

你的模板就是

<div>This is outer message</div>

从而从实例化中删除内部指令。使用您的开发工具查看 DOM 的区别，看看使用模板和不使用模板有何不同

【讨论】：