Javascript 使用AngularJS在指令内单击时触发函数
我的以下指令工作正常:Javascript 使用AngularJS在指令内单击时触发函数,javascript,angularjs,Javascript,Angularjs,我的以下指令工作正常: app.directive('theDirective', ['musicInfoService', function(musicInfoService) { return { restrict: 'A', scope: { position: '@', last: '@', release: '=', artist: '=', versions: '@' }, link: function(scope, elemen
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');
});
}
};
}
]);
scope.release.id和scope.release.format来自另一个$http调用
下面是为了说明错误(在directive.js的第49行中注释掉了有问题的函数)
有任何指针吗?通过尝试直接操作DOM,您绕过了angular为您所做的大部分工作。使用模板(或templateUrl)而不是angular.element(),变量将自动绑定。自动绑定的出色用法:)
var versions = scope.release.format;
musicInfoService.getReleaseVersions(scope.release.id)
.success(function(data) {
if (data.error) return;
var format = data.versions,
formats = scope.release.format;
if (format !== '') {
formats = format;
}
scope.versions = formats;
})