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

Question

我试图将当前使用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', 
    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'); 
     }); 
    } 
    }; 
} 
]); 

编辑：这个指令来自this Plunker。

编辑II：这里的the example我试图实现它。

Answer 1

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

在三元运算符中缺少“其他”选项。分号

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" 

而我没有看到它的任何定义。像Ctrl一样，VersionController需要一个定义。你得到的错误很明显。

错误：[ng：areq]参数'VersionController'不是函数，未定义