Question

我正在尝试使用$compile在控制器中创建一个元素，但无法让它工作。

$scope.open_svg = function(){
    var sc = $scope.$new(true);
    sc.fill = "#0000ff";
    var t = '<svg  xmlns="http://www.w3.org/2000/svg" '+
            'xmlns:xlink="http://www.w3.org/1999/xlink"> ' +
            '<rect ng-attr-x="10" y="10" height="100" width="100" ' +
            'style="stroke:#ff0000; fill:{{fill}}"/> ' +
            '</svg>';
    var svg = $compile(t)(sc);
    open("data:image/svg+xml,\n" + encodeURIComponent(svg[0].outerHTML));
}

这个相同的代码在指令中工作正常。但正如您所看到的，我正在尝试打开一个新窗口，以便用户可以保存SVG，我想这样做而不需要代码在指令中

Answer 1

它适用于我，只要你执行该功能;）这就是你可能缺少的东西。你怎么真的应该考虑将其转变为指令。建议不要在控制器中使用html代码。

Answer 2

实际上代码本身几乎没问题，但由于$ compile服务是异步的，你应该在编译完成后打开窗口。否则绑定将无法解析。

所以只是添加了一个超时，

    setTimeout(function(){
        var data_url = "data:image/svg+xml,\n" + encodeURIComponent(svg[0].outerHTML);
        $window.open(data_url, '_blank', 'toolbar=0,location=0,menubar=1');
    });

它有效。

AngularJS：$ compile不在控制器内部工作

2 个答案: