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

时间:2016-03-18 11:21:17

标签: angularjs module directive

我的指令声明为:

     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>

没有渲染任何东西。我做错了什么?

1 个答案:

答案 0 :(得分:0)

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

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