angularjs 中另一个指令内的指令,而内部指令来自另一个模块

Directive inside another directive in angularjs while the inner directive is from another module

我将指令声明为:

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

    myApplication.directive("dir", function () {
        return {
                 restrict: "E",
                 transclude: true,
                 template: "<div> Text  </div>",
      }; 
    });

我在另一个模块中写了另一个指令

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

    myOtherApplication.directive("myDirective", function () {
       return {
          restrict: "E",    
          template: "<div > More content </div>",
       };
    });

下面的 html 没有呈现内部指令:

    <div ng-app="myApplication">
        Some content ...
        <dir >
             Some more content ...
             <my-directive></my-directive>

      </dir>

没有渲染 anything.Am 我做错什么了吗?

如果要保留指令的内部内容并使Angular编译内部人员,则需要使用ngTranslude指令:

myApplication.directive("dir", function () {
    return {
        restrict: "E",
        transclude: true,
        template: 
          "<div>" + 
            "Text " + 
            "<div ng-transclude><!-- insert content here --></div>" +
          "</div>",
    }; 
});