在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'不是函數，未定義