Javascript 在AngularJS中将angular.element（）转换为模板

我正在尝试将当前使用angular.element（）的指令转换为模板，但到目前为止，模板一不起作用。 作为AngularJS的新手，我想我犯了一些大错误，但到目前为止我还看不出来。 有什么建议吗

这是原件：

app.directive('theDirective',  ['musicInfoService',
function(musicInfoService) {
return {
restrict: 'A',
scope: { position: '@', last: '@', release: '=',
    artist: '=', versions: '@' },
link: function(scope, element, attrs) {

  element.bind('click', function() {
    // Highlight clicked element
    angular.element(document.querySelector('.clicked')).removeClass('clicked');
    element.addClass('clicked');

    // Create the collapse element or select existing one
    var collapseQuery = document.querySelector('#collapse');
    var collapse = collapseQuery === null ?
      angular.element('<div id="collapse" ng-controller="VersionController" class="col-md-12 col-xs-12"> \
            <div class="inner"> \
              <ul> \
                <li class="title">{{release.title}}</li> \
                <li class="row top" ng-show="versions"> \
                  <div class="col-md-1">Year</div> \
                  <div class="col-md-3">Format</div> \
                  <div class="col-md-3">Label</div> \
                  <div class="col-md-2">Country</div> \
                  <div class="col-md-2">Cat. Nº</div> \
                </li> \
                <li class="row" ng-show="versions" ng-repeat="version in versions | filter: \'!file\' | orderBy: version.released"> \
                  <div class="col-md-1">{{(version.released | release:4) || \'-----\'}}</div> \
                  <div class="col-md-3">{{version.format}}</div> \
                  <div class="col-md-3">{{version.label}}</div> \
                  <div class="col-md-2">{{version.country}}</div> \
                  <div class="col-md-2">{{version.catno}}</div> \
                </li> \
                <li class="row top" ng-hide="!release.format"> \
                  <div class="col-md-1">Year</div> \
                  <div class="col-md-3">Format</div> \
                  <div class="col-md-3">Label</div> \
                </li> \
                <li class="row" ng-hide="!release.format"> \
                  <div class="col-md-1">{{release.year}}</div> \
                  <div class="col-md-3">{{release.format}}</div> \
                  <div class="col-md-8">{{release.label}}</div> \
                </li> \
              </ul> \
            </div> \
          </div>') :
      angular.element(collapseQuery);

    // Based on the position of the clicked element calculate the rounded number up to the nearest multiple of four
    var calculatedPosition = Math.ceil(scope.position / 4) * 4;

    // Get the element at the calculated position or the last one
    var calculatedQuery = document.querySelector('[position="' + calculatedPosition + '"]');
    if (calculatedQuery === null) calculatedQuery = document.querySelector('[last="true"]');;

    var calculatedElement = angular.element(calculatedQuery);

    // Insert the collapse element after the element at the calculated position
    calculatedElement.after(collapse);
    // Highlight the calculated element
    angular.element(document.querySelector('.calculated')).removeClass('calculated');
    calculatedElement.addClass('calculated');
  });

  scope.$on('$destroy', function() {
    element.unbind('click');
  });
}
};
}
]);

app.directive（'theDirective'，['musicInfoService'，
功能（音乐服务）{
返回{
限制：“A”，
作用域：{position:'@'，last:'@'，release:'='，
艺术家：'='，版本：'@'}，
链接：函数（范围、元素、属性）{
元素绑定（'单击'，函数（）{
//高亮显示单击的元素
元素（document.querySelector（'.clicked'））.removeClass（'clicked'）；
元素addClass（'clicked'）；
//创建折叠图元或选择现有图元
var collapseQuery=document.querySelector（“#collapse”）；
var collapseQuery=collapseQuery==null？
角元素（'\
\
\
{{release.title}}
\
\
年\
格式\
标签\
国家\
类别编号：\
\
\
{{（version.release{124; release:4）{124;}\'----\'}\
{{version.format}\
{{version.label}\
{{version.country}\
{{version.catno}\
\
\
年\
格式\
标签\
\
\
{{release.year}\
{{release.format}\
{{release.label}\
\
\
\
') :
角元素（折裂方程）；
//根据单击元素的位置，计算四舍五入的数字，直到四的最接近倍数
var calculatedPosition=Math.ceil（scope.position/4）*4；
//获取计算位置或最后一个位置的元素
var calculatedQuery=document.querySelector（'[position=“'+calculatedPosition+'“]）；
if（calculatedQuery==null）calculatedQuery=document.querySelector（'[last=“true”]'）；；
var calculatedElement=angular.element（calculatedQuery）；
//在计算位置的图元后插入折叠图元
计算后的元素（塌陷）；
//高亮显示计算的图元
元素（document.querySelector（'.computed'））.removeClass（'computed'）；
CalculateElement.addClass（'calculated'）；
});
作用域.$on（“$destroy”，函数（）{
元素。解除绑定（“单击”）；
});
}
};
}
]);

转换后的一个：

  app.directive('theDirective',  ['musicInfoService',
  function(musicInfoService) {
  return {
    restrict: 'A',
    scope: { position: '@', last: '@', release: '=', artist: '='},
    template: '<div id="collapse" ng-controller="VersionController" class="col-md-12 col-xs-12"> \
                <div class="inner"> \
                  <ul> \
                    <li class="title">{{release.title}}</li> \
                    <li class="row top" ng-show="versions"> \
                      <div class="col-md-1">Year</div> \
                      <div class="col-md-3">Format</div> \
                      <div class="col-md-3">Label</div> \
                      <div class="col-md-2">Country</div> \
                      <div class="col-md-2">Cat. Nº</div> \
                    </li> \
                    <li class="row" ng-show="versions" ng-repeat="version in versions | filter: \'!file\' | orderBy: version.released"> \
                      <div class="col-md-1">{{(version.released | release:4) || \'-----\'}}</div> \
                      <div class="col-md-3">{{version.format}}</div> \
                      <div class="col-md-3">{{version.label}}</div> \
                      <div class="col-md-2">{{version.country}}</div> \
                      <div class="col-md-2">{{version.catno}}</div> \
                    </li> \
                    <li class="row top" ng-hide="!release.format"> \
                      <div class="col-md-1">Year</div> \
                      <div class="col-md-3">Format</div> \
                      <div class="col-md-3">Label</div> \
                    </li> \
                    <li class="row" ng-hide="!release.format"> \
                      <div class="col-md-1">{{release.year}}</div> \
                      <div class="col-md-3">{{release.format}}</div> \
                      <div class="col-md-8">{{release.label}}</div> \
                    </li> \
                  </ul> \
                </div> \
              </div>',
    replace: false,
    link: function(scope, elem, attrs) {

      elem.bind('click', function() {
        // Highlight clicked element
        elem(document.querySelector('.clicked')).removeClass('clicked');
        elem.addClass('clicked');

        // Create the collapse element or select existing one
        var collapseQuery = document.querySelector('#collapse');
        var collapse = collapseQuery === null ?
        elem(collapseQuery)

        // Based on the position of the clicked element calculate the rounded number up to the nearest multiple of four
        var calculatedPosition = Math.ceil(scope.position / 4) * 4;

        // Get the element at the calculated position or the last one
        var calculatedQuery = document.querySelector('[position="' + calculatedPosition + '"]');
        if (calculatedQuery === null) calculatedQuery = document.querySelector('[last="true"]');;

        var calculatedElement = angular.element(calculatedQuery);

        // Insert the collapse element after the element at the calculated position
        calculatedElement.after(collapse);

      });

      scope.$on('$destroy', function() {
        elem.unbind('click');
      });
    }
  };
}
]);

app.directive（'theDirective'，['musicInfoService'，
功能（音乐服务）{
返回{
限制：“A”，
作用域：{position:'@'，last:'@'，release:'='，artist:'='}，
模板：'\
\
\
{{release.title}}
\
\
年\
格式\
标签\
国家\
类别编号：\
\
\
{{（version.release{124; release:4）{124;}\'----\'}\
{{version.format}\
{{version.label}\
{{version.country}\
{{version.catno}\
\
\
年\
格式\
标签\
\
\
{{release.year}\
{{release.format}\
{{release.label}\
\
\
\
',
替换：false，
链接：功能（范围、要素、属性）{
元素绑定（'单击'，函数（）{
//高亮显示单击的元素
elem（document.querySelector（'.clicked'））.removeClass（'clicked'）；
元素addClass（'clicked'）；
//创建折叠图元或选择现有图元
var collapseQuery=document.querySelector（“#collapse”）；
var collapseQuery=collapseQuery==null？
元素（衣领装备）
//根据单击元素的位置，计算四舍五入的数字，直到四的最接近倍数
var calculatedPosition=Math.ceil（scope.position/4）*4；
//获取计算位置或最后一个位置的元素
var calculatedQuery=document.querySelector（'[position=“'+calculatedPosition+'“]）；
if（calculatedQuery==null）calculatedQuery=document.querySelector（'[last=“true”]'）；；
var calculatedElement=angular.element（calculatedQuery）；
//在计算位置的图元后插入折叠图元
计算后的元素（塌陷）；
});
作用域.$on（“$destroy”，函数（）{
元素解除绑定（“单击”）；
});
}
};
}
]);

编辑：此指令来自

编辑II：下面是我尝试实现它的地方

    var collapse = collapseQuery === null ?
    elem(collapseQuery)

三元运算符中缺少“else”选项。分号呢

    var collapse = collapseQuery === null ?
    elem(collapseQuery) : "Some other option";

你的控制器代码很混乱，我放弃了阅读。试着用一种更“有角度”的方式来定义它

这可能不是个好主意

app.controller('Ctrl', ["$scope" , "musicInfoService", 
  function ($scope, musicInfoService) {
    $scope.getDetails = function (id) {
      // Your function goes here.
    };

    $scope.search = function () {
      musicInfoService.doSomething();
    };
  }
]);

ng-controller="VersionController"