Question

在指令沟通方面遇到一些麻烦，特别是内部和外部自定义标签。

所以，我有以下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>"行才会出现第二个！我想这个问题与页面呈现（链接和编译功能）有关。其实我已经对它感到困惑，我无法解决这个问题。任何人都可以帮助我吗？

Answer 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在div中插入内部。

Answer 2

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

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

将您的模板设为

<div>This is outer message</div>

因此删除了内部指令的实例化。使用您的开发工具查看DOM的不同之处，看看使用模板的方式与使用模板的不同之处

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

2 个答案: