Question

我正在尝试使用一个从其父作用域继承属性的指令，根据scope.stnPage的属性加载三个不同模板中的一个。不幸的是，我收到了这个警告：

主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用。如需更多帮助，请查看https://xhr.spec.whatwg.org/。警告：试图加载角度不止一次。

我已经从父控制器中注释掉了所有内容，它仍然会这样做。我已将scope设置为true，但仍然会这样做。我已经将答案缩小到templateUrl作为问题的根源。

这是我正在使用的元素：

<preset-stations page="page1"></preset-stations>

这是我在指令上的代码：

angular.module('app').directive('presetStations', ['$state', '$interval', '$parse', '$compile', function($state, $interval, $parse, $compile){

    var presets = {
        //array
    };      

    function getContentUrl(x){
        var url = 'public/javascripts/presets' + x + '.html';
        return url;
    };

    var linker = function(scope, element, attrs){
        //stuff i've commented out
    }

    return {
        restrict: 'EA',
        scope: true,
        link: linker,
        templateUrl: function(el, attrs){
            return getContentUrl(attrs.page);
        }
    };  
}]);

这不起作用，但确实如此：

    return {
        restrict: 'EA',
        scope: true,
        link: linker,
        templateUrl: function(el, attrs){
            return 'public/templates/presetspage1.html;
        }
    };

我在其他与指令中的动态模板相关的页面上看到了以下内容。我尝试过这种变化，但它没有奏效。这是解决方案吗？

    var linker = function(scope, element, attrs){
        element.html(getTemplate(scope.content)).show();
        $compile(element.contents())(scope);
    };

    function getTemplate(){
        // stuff happens here
    }

这是开发工具网络的结果：

Answer 1

这是一种黑客行为，但它确实有效：我制作了三个指令，它们在工厂之间共享相同的功能，我在DOM中做了这个：

xsd:anySimpleType

我知道这与D.R.Y相反。原则，但我尽可能多地分享功能。

templateUrl - Angular动态指令多次加载

1 个答案: