Javascript 自定义ngInclude:模板中的变量未被替换

我试图创建一个指令来加载自定义模板，但如果自定义模板不存在，请加载默认模板

这是我的密码：

HTML:

<my-include src="path/to/template.html"></my-include>

这将显示正确的模板：
这将显示一个错误模板：
我想显示状态：{{state}
“error template.html”中的您好

基本上，您想要的是“增强”ngInclude，以支持和错误回退，而不是创建新的作用域（因为这可能会导致类似或等的某些“bug”）

我已经创建了一个这样做的指令。它加载通过src属性指定的自定义模板，并支持通过error src属性指定的回退模板选项

我不太喜欢这种方法，尤其是当你在模板中添加依赖于其父级的逻辑时。您应该将模板逻辑委托给重点明确且可重用的指令。这将有助于测试过程并隐藏实现细节

angular
.module（'应用程序'，[]）
.controller（'MainController'，['$scope'，
职能（$范围）{
//内容加载了吗？
$scope.state='loading'；
}
])
.directive（'staticNgInclude'、['$compile'、'$http'、'$templateCache'，
函数（$compile，$http，$templateCache）{
返回{
链接：功能（范围、IELENT、iAttrs）{
如果（角度未定义（iAttrs.src））{
抛出“staticNgInclude需要src属性”
}
$http
.get（iAttrs.src{
缓存：$templateCache
}).然后（功能（响应）{
//万岁，找到模板了！
$compile（iElement.html（response.data.contents（））（作用域）；
}，函数（）{
//获取错误模板！
$http
.get（iAttrs.errorSrc | |“error template.html”{
缓存：$templateCache
}).然后（功能（响应）{
$compile（iElement.html（response.data.contents（））（作用域）；
});
});
},
替换：false，
限制：“E”
};
}
]);

这将显示正确的模板：
这将显示一个错误模板：
我想显示状态：{{state}
“error template.html”中的您好
基本上，您想要的是“增强”ngInclude，以支持和错误回退，而不是创建新的作用域（因为这可能会导致类似或等的某些“bug”）

我已经创建了一个这样做的指令。它加载通过src属性指定的自定义模板，并支持通过error src属性指定的回退模板选项

我不太喜欢这种方法，尤其是当你在模板中添加依赖于其父级的逻辑时。您应该将模板逻辑委托给重点明确且可重用的指令。这将有助于测试过程并隐藏实现细节


angular
.module（'应用程序'，[]）
.controller（'MainController'，['$scope'，
职能（$范围）{
//内容加载了吗？
$scope.state='loading'；
}
])
.directive（'staticNgInclude'、['$compile'、'$http'、'$templateCache'，
函数（$compile，$http，$templateCache）{
返回{
链接：功能（范围、IELENT、iAttrs）{
如果（角度未定义（iAttrs.src））{
抛出“staticNgInclude需要src属性”
}
$http
.get（iAttrs.src{
缓存：$templateCache
}).然后（功能（响应）{
//万岁，找到模板了！
$compile（iElement.html（response.data.contents（））（作用域）；
}，函数（）{
//获取错误模板！
$http
.get（iAttrs.errorSrc | |“error template.html”{
缓存：$templateCache
}).然后（功能（响应）{
$compile（iElement.html（response.data.contents（））（作用域）；
});
});
},
替换：false，
限制：“E”
};
}
]);

这将显示正确的模板：
这将显示一个错误模板：
我想显示状态：{{state}
“error template.html”中的您好
也可以尝试在
编译
阶段而不是在
发布链接
中执行此操作，我该怎么做？对不起，还不是angularjs专家！也可以尝试在
compile
阶段而不是
post-link
中执行此操作，我如何才能做到这一点？对不起，还不是angularjs专家！我已经试过了，但是我得到了一个角度误差，我的模板仍然没有显示出来。我将用我得到的错误更新我的问题。我已经添加了一个我想你正在尝试实现的示例。基本上，我正在做的是允许开发人员使用自定义模板，覆盖默认模板-为了允许，他们必须将自定义模板放在“custom”文件夹下。如果include找不到具有相同视图名称的“自定义”模板，它将加载默认模板-这就是my.replace（'/custom'，''）的要点现在我的模板已加载。。。但其控制器中的变量似乎不起作用（我有一个“state”变量，用于显示加载程序或内容。我只有一个空白。在调试器中，所有代码都被注释掉了……感谢您的帮助，伙计！注意，您的指令有一个i
angular.module('app')

    .directive("myInclude", function ($compile) {
        return {
            restrict: 'CAE',
            replace: true,
            scope: {
                src: '@',
            },
            link: function (scope, iElement, iAttrs, controller) {
                scope.$on("$includeContentError", function (event, args) {

                    scope.src = args.replace('/custom', '').replace("'", '');
                });
                scope.$on("$includeContentLoaded", function (event, args) {

                    scope.src = args.replace("'", '');
                });
            },
            template: '<div class="include-container" ng-include="src"></div>'
        };
    })
;

<div class="include-container ng-scope" ng-include="src" src="path/to/template.html"><div class="main-information-content ng-scope">
</div>

template: '<div class="include-container" ng-include="{{ src }}"></div>'

template: '<div class="include-container" ng-include="tmpSrc"></div>'