1

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

所以，我有以下 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>"行才出现！我想这个问题与页面渲染（链接和编译功能）有关。实际上我对此感到困惑，我无法修复此错误。谁能帮我？

4

2 回答 2

4

如果您提供模板，它将替换的内容<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);
            }
        }
    }
});

这将在 div 内插入 inner ng-transclude。

于 2013-10-09T14:52:54.080 回答
1

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

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

使用您的模板

<div>This is outer message</div>

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

于 2013-10-09T14:51:03.353 回答