1
AngularJS를 처음 사용했습니다. 저는 AngularJS 1.2.5와 Bootstrap 3.0을 사용하고 있습니다. 내 응용 프로그램에 ScrollSpy를 포함하려고합니다. 그러나 몇 가지 문제가 있습니다. 코드를 통합하려고하는데 here입니다. 현재, 내 코드는 다음과 같습니다AngularJS에서 ScrollSpy 사용
index.html을
<div class="row" scroll-spy>
<div class="col-md-3 sidebar">
<ul style="position:fixed;" class="nav nav-pills nav-stacked">
<li class="active" spy="overview"><a href="#overview">Overview</a></li>
<li spy="main"><a href="#main">Main Content</a></li>
<li spy="summary"><a href="#summary">Summary</a></li>
<li spy="links"><a href="#links">Other Links</a></li>
</ul>
</div>
<div class="col-md-9 content">
<h3 id="overview">Overview</h3>
Lorem Ipsum Text goes here...
<h3 id="main">Main Body</h3>
Lorem Ipsum Text goes here...
<h3 id="summary">Summary</h3>
Lorem Ipsum text goes here...
<h3 id="links">Other Links</h3>
</div>
</div>
index.html.js
angular.module('td.controls.scrollSpy', [])
.directive('spy', function ($location) {
return {
restrict: 'A',
require: '^scrollSpy',
link: function (scope, elem, attrs, scrollSpy) {
var _ref;
if ((_ref = attrs.spyClass) == null) {
attrs.spyClass = 'current';
}
elem.click(function() {
return scope.$apply(function() {
return $location.hash(attrs.spy);
});
});
return scrollSpy.addSpy({
id: attrs.spy,
'in': function() {
return elem.addClass(attrs.spyClass);
},
out: function() {
return elem.removeClass(attrs.spyClass);
}
});
}
};
})
.directive('scrollSpy', function ($location) {
return {
restrict: 'A',
controller: function ($scope) {
$scope.spies = [];
return this.addSpy = function (spyObj) {
return $scope.spies.push(spyObj);
};
},
link: function (scope, elem, attrs) {
var spyElems;
spyElems = [];
scope.$watch('spies', function (spies) {
var spy, _i, _len, _results;
_results = [];
for (_i = 0, _len = spies.length; _i < _len; _i++) {
spy = spies[_i];
if (spyElems[spy.id] == null) {
_results.push(spyElems[spy.id] = elem.find('#' + spy.id));
} else {
_results.push(void 0);
}
}
return _results;
});
return $($window).scroll(function() {
var highlightSpy, pos, spy, _i, _len, _ref;
highlightSpy = null;
_ref = scope.spies;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
spy = _ref[_i];
spy.out();
spyElems[spy.id] = spyElems[spy.id].length === 0 ? elem.find('#' + spy.id) : spyElems[spy.id];
if (spyElems[spy.id].length !== 0) {
if ((pos = spyElems[spy.id].offset().top) - $window.scrollY <= 0) {
spy.pos = pos;
if (highlightSpy == null) {
highlightSpy = spy;
}
if (highlightSpy.pos < spy.pos) {
highlightSpy = spy;
}
}
}
}
return highlightSpy != null ? highlightSpy['in']() : void 0;
});
}
};
})
;
내가 몇 가지 오류를 얻을 브라우저에서 실행합니다. 내가 처음 실행할 때, 나는 내 브라우저 콘솔에서 다음과 같은 오류를 참조하십시오
TypeError: Object function (spyObj) { return $scope.spies.push(spyObj); } has no method 'addSpy'
ReferenceError: $window is not defined
내가 알아낼 수없는) 나는 이러한 오류를 받고 있어요 왜 또는 b)이 기본 예제가 작동하도록하는 방법에 대해 설명합니다. AngularJS에서 scrollspy를 사용하는이 접근법을 정말 좋아합니다. 그것은 내가 본 가장 깨끗한 구현입니다. 그런 이유로, 나는이 일을하는 방법을 알아 내기를 원합니다.