我可以在Angular模板中使用指令作为视图吗？

Question

这个问题来自以下场景：

在我网站的主页上，我想要一个动画图片库（非常简单，图片将使用javascript动画）。

所以，我想要包含一个包含图库的视图，以及执行动画所需的javascript。

首先，我打算将照片的html包含在视图中，然后在函数中指定javascript，使其看起来像这样：

App.js：

angular.module('app', [])
    .config(function($routeProvider) {
        $routeProvider
          .when('/', {
            templateUrl: 'views/gallery.html',
            controller: 'GalleryControl'
          }))

Gallery.html：

<p ng-init="anim()">Welcome to my gallery </p>
<img id="one" src=''>
<img id="two" src=''>

GalleryControl：

angular.module('app')
  .controller('GalleryControl', function ($scope) {
    $scope.anim = function () {
      var one = document.querySelector('#one');
      var two = document.querySelector('#two');
      // Perform the javascript animation
    } 

但有人告诉我，从控制器修改dom并不是一个好主意。所以，我的问题是，解决问题的最佳方法是什么？似乎使用指令是最好的方法，但是，如果是这种情况，那么template中指定的$routeProvider实际上只是指令。

这样的事情：

图库指令：

angular.module('app')
  .directive('gallery', function () {
    return {
      template: '<div><img id="one"> <img id="two"></div>',
      replace: true,
      restrict: 'E',
      link: function postLink(scope, element, attrs) {
        var one = document.querySelector('#one');
        var two = document.querySelector('#two');
        //Perform animation here
      }
    };
  });

• 这是常见/可接受吗？

• 如果是这样，我可以指定template或templateUrl作为指令吗？