Javascript 父指令和子指令的动态模板URL，不起作用

我有这个结构

         <aspect aspect="aspect" aspectid="props.getId(aspect)">
             <simpleproperty property="property"></simpleproperty>
              <uriproperty property="property"></uriproperty>
          </aspect>

也以类似的方式定义了子指令

   .directive("simpleproperty",["$compile","$http",function ($compile,$http) {

    return {
        restrict: "E",
        transclude:true,
        scope:{
            aspect:"="
        },
       link: function (scope, element, attr) {
            scope.props=Props;
           var templateUrl = //if(scope.isURL) "one.html" else "two.html" 
            if(!_.isUndefined(templateUrl)){
                $http.get(templateUrl, {cache: $templateCache})
                    .success(function (html) {
                    element.replaceWith($compile(html)(scope));

                });
            }
        }
    };
}]);

我的要求是使用scope对象，基于一些业务逻辑基本上加载父级和子级的指令模板。但它根本不起作用。我在Stack overflow中读到无法使用templateUrl动态加载模板，这就是我删除它并使用$compile的原因

注意：若我只在children指令中保持模板的动态加载，那个么它可以正常工作，但反之亦然，或者两者都不起作用

---

请帮忙

这是因为在父级中，您将用新标记替换内容，而子级将被覆盖！当您删除动态加载父项时，子项就存在了，并且可以替换它自己。我理解，但我保留了与父项和子项相关的模板html文件。。。

   .directive("simpleproperty",["$compile","$http",function ($compile,$http) {

    return {
        restrict: "E",
        transclude:true,
        scope:{
            aspect:"="
        },
       link: function (scope, element, attr) {
            scope.props=Props;
           var templateUrl = //if(scope.isURL) "one.html" else "two.html" 
            if(!_.isUndefined(templateUrl)){
                $http.get(templateUrl, {cache: $templateCache})
                    .success(function (html) {
                    element.replaceWith($compile(html)(scope));

                });
            }
        }
    };
}]);