Javascript AngularJS指令通信和页面模板-内部指令不'；行不通_Javascript_Html_Angularjs_Angularjs Directive

Javascript AngularJS指令通信和页面模板-内部指令不'；行不通

javascript html angularjs

Javascript AngularJS指令通信和页面模板-内部指令不'；行不通,javascript,html,angularjs,angularjs-directive,Javascript,Html,Angularjs,Angularjs Directive,在指令通信方面有一些问题，特别是在内部和外部自定义标记方面因此，我有以下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/javas

在指令通信方面有一些问题，特别是在内部和外部自定义标记方面

因此，我有以下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");
        }
    }
});

var-app=angular.module（“app”，[]）；
应用指令（“外部”，函数（）{
返回{
模板：“这是外部消息”，
限制：“E”，
替换：false，
控制器：函数（）{
this.say=功能（消息）{
控制台日志（消息）；
}
}
}
});
应用指令（“内部”，函数（）{
返回{
限制：“E”，
要求“^outer”，
替换：false，
控制器：函数（$scope）{}，
链接：函数（作用域、元素、属性、outerCtrl）{
说（“这是内在的信息”）；
}
}
});

看起来很简单。我想在屏幕上显示一条消息，在控制台记录器上显示另一条消息。但是第二条直到我注释

模板：“这是外部消息”

行后才出现！我认为问题与页面呈现（链接和编译函数）有关。事实上，我对它感到困惑，我无法修复这个错误。

有人能帮我吗？

你无意中找到了自己问题的答案。

outer

指令的

template

选项将替换元素

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

与你的模板只是

<div>This is outer message</div>

这是外部消息

从而将内部指令从实例化中移除。使用您的开发工具查看DOM的不同之处，看看使用模板和不使用模板有什么不同

您偶然发现了自己问题的答案。

outer

指令的

template

选项将替换元素

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

与你的模板只是

<div>This is outer message</div>

这是外部消息

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

如果提供模板，它将替换

的内容（

replace

选项仅控制是否替换

标记）

因此，

指令不再链接。如果要在链接内部标记的同时提供模板。您需要使用转换：

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);
            }
        }
    }
});

app.directive（“外部”，函数（）{
返回{
模板：“这是外部消息”，
限制：“E”，
替换：false，
是的，
控制器：函数（）{
this.say=功能（消息）{
控制台日志（消息）；
}
}
}
});

这将使用

ng transclude

插入div内部。如果提供模板，它将替换

的内容（

replace

选项仅控制是否替换

标记）

因此，

指令不再链接。如果要在链接内部标记的同时提供模板。您需要使用转换：

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);
            }
        }
    }
});

app.directive（“外部”，函数（）{
返回{
模板：“这是外部消息”，
限制：“E”，
替换：false，
是的，
控制器：函数（）{
this.say=功能（消息）{
控制台日志（消息）；
}
}
}
});

这将使用

ng transclude

将内部插入div