Question

我有以下指令......

app.directive('layoutPreview', function () {
return {
    restrict : 'E',
    transclude : false,
    scope: {
        layout: '@',
        previewid : '='
    },
    controller : function($scope){
        console.log($scope.layout);
        console.log($scope.previewid);
        layoutPreview($scope.layout, "canvas-layout-" + $scope.previewid);
    },
    template:
    '<canvas height="200" width="350" id="canvas-layout-{{previewid}}">' + 
    '</canvas>'
}
})

其中，放置后会渲染带预览的画布。但是，模板中的{{previewid}}永远无法解析，我不确定原因。两个日志输出也显示正确的值。甚至我的layoutPreview（）函数中的输出也显示了它应该搜索的元素的正确id。检查页面显示角度绑定尚未解决。有什么想法吗？

Answer 1

我认为它是因为模板在创建控制器之前呈现，因此绑定不起作用;即，在呈现时$scope不存在。

尝试：

template: function($attrs) {
    return '<canvas height="200" width="350" id="canvas-layout-'
        + $attrs.previewid
        + '"></canvas>';
}

此外，如果previewid只是一个字符串，请使用：

scope: {
    previewid : '@'
},

=用于双向绑定和对象。

这将在呈现模板之前插入previewid 。

旁注：如果transclude: false，您不必包含false，我建议您使用component代替directive如果你使用Angular 1.5 +。

模板中的角度绑定无法解析

1 个答案: