Question

下面是我的代码，我无法将数据转换为指令来绘制画布。我想在画布上更新textarea中的文本。 HTML代码：

<body ng-app="myApp" ng-controller="textCtrl">

Answer 1

您无需创建服务和控制器，请尝试以下代码：

        <div class="container">
            <textarea ng-model="data">

            </textarea>

        </div>

    <canvas id="myCanvas" txt-img txt-data="data" width="200" height="100" style="border:1px solid #7d0f8b;"></canvas>



    <script src="app.js"></script>
</body>

直接在你的指令中注入textarea的contenu。

app.directive('txtImg', function(){
return {
    restrict: 'AEC',

    scope:{
       data:"=txt-data"
    },
    link: function(scope, el, attr){
        var c = el[0];
        var ctx = c.getContext("2d");
        ctx.font = "15px Arial";
        ctx.fillText(scope.data,20,20);

    }
}
});

并在您的控制器中：

app.controller('textCtrl', function($scope){
  $scope.data = "";
});

如何使用来自服务的数据加载我的指令

1 个答案: