Question

我是AngularJS的新手，我正在努力将使用JQuery和Bootstrap编写的现有Web应用程序转换为使用AngularJS和Ionic的Web应用程序。

我的网页应用程序中有3个页面，每个页面都有一个html5画布和一个按钮。画布布局和样式在每个页面上完全相同，但是按钮会为每个画布绘制不同的内容，例如第1页画一只狗，第2页画一只猫，第3页画一只鸡。

因此，我在三个页面之间使用相同的元素ID，例如画布的'#myCanvas'。我有一个名为'Drawer'的Javascript对象，当按下相关按钮时，它会将相关内容绘制到'#myCanvas'。

转换为AngularJS时，我将每个页面放入模板中，并将“Drawer”对象转换为名为DrawFactory的工厂。每个页面都链接到使用DrawFactory的不同控制器。

我的问题是，例如，我在第2页，然后点击绘制猫按钮，它将它绘制到第1页的#myCanvas。以前这不是问题，因为每个页面单独加载，因此所有ids是独一无二的。

如果不将每个画布重命名为（例如）＃myCanvas1，＃myCanvas2，＃myCanvas3-并创建3个单独绘制到其中一个的独立DrawFactories，我怎样才能达到我想要的效果？

我确信我只是错过了一些关键的AngularJS概念。谢谢。

Answer 1

如果没有发布您的代码，我怀疑您可能仍在使用jQuery选择器来查找元素（例如$('#myCanvas')）。您可能希望重新构建代码以在高级别上执行此操作。

<div ng-controller="PageOneCtrl">
  <drawing source="animal"></drawing>
  <button ng-click="drawAnimal()">Draw</button>
</div>

控制器的定义类似于以下内容：

angular.module('app').controller('PageOneCtrl', function ($scope) {
  $scope.animal = null;

  $scope.drawAnimal = function () {
    $scope.animal = 'dog.png';
  };
});

绘图指令如下：

angular.module('app').directive('drawing', function () {
  return {
    scope: {
      source: '='
    },
    template: '<canvas width="100" height="100"></canvas>',
    link: function (scope, element) {
      scope.$watch('source', function (newSource) {
        if (!newSource) return;

        var context = element.getContext('2d'),
            image = new Image(100, 100);

        image.src = newSource;
        image.onload = function () {
          context.drawImage(image, 0, 0);
        };
      });
    }
  };
});

AngularJS app

1 个答案: