Javascript 使用Ionic和AngularJS在$scope中更改变量值时未在视图中更新
我使用Ionic 1.1和angularJS 1.4开发了以下简单的应用程序 当Javascript 使用Ionic和AngularJS在$scope中更改变量值时未在视图中更新,javascript,angularjs,ionic-framework,ionic,Javascript,Angularjs,Ionic Framework,Ionic,我使用Ionic 1.1和angularJS 1.4开发了以下简单的应用程序 当$index等于变量currentIndex时，它在离子滚动中滚动项目列表，然后尝试更改突出显示类 当我输出console.log（“currentIndex:+$scope.currentIndex”）时，我得到了正确的值但它在视图中从不更改 为了使视图中的currentIndex变量正确更新，我缺少了什么 HTML <body ng-app="starter" ng-controller="AppCt
$indexcurrentIndex离子滚动中滚动项目列表突出显示console.log（“currentIndex:+$scope.currentIndex”）时，我得到了正确的值但它在视图中从不更改
为了使视图中的currentIndex
变量正确更新，我缺少了什么
HTML
<body ng-app="starter" ng-controller="AppCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<ion-scroll direction="y" on-scroll="gotScrolled()" delegate-handle="signsScroll">
<div class="sign" ng-repeat="sign in signs" ng-class="{'highlight': $index === currentIndex}">{{sign}}</div>
</ion-scroll>
</ion-content>
</ion-pane>
</body>
离子空白起动器
{{sign}}
JS
$scope.signs = ["Aries", "Taurus", "Gemini", "Cancer", "Leo", "Virgo", "Libra", "Scorpio", "Sagittarius", "Capricorn", "Aquarius", "Pisces"];
$scope.currentIndex = 0;
$scope.gotScrolled = function () {
var itemLength = $scope.signs.length,
containerHeight = 100,
viewingItemNumberObj = {"min": itemLength + 1, "max":0};
// Apply class depending whether they are visible within the container or not
$.each($(".sign"), function () {
if($(this).position().top < 0 || $(this).position().top > containerHeight -10) {
$(this).addClass("notInView");
$(this).removeClass("inView");
} else {
$(this).addClass("inView");
$(this).removeClass("notInView");
}
});
// Get min and max obj position thats showing in the scroller
$.each($(".inView"), function () {
var theIndex = $scope.signs.indexOf($(this).text());
if(theIndex <= viewingItemNumberObj.min ) {
viewingItemNumberObj.min = theIndex;
} else if (theIndex >= viewingItemNumberObj.min && viewingItemNumberObj.max <= theIndex ) {
viewingItemNumberObj.max = theIndex;
}
})
// get the number and apply it to the currentIndex
$scope.currentIndex = Math.floor((viewingItemNumberObj.min + viewingItemNumberObj.max) / 2);
console.log("currentIndex: " + $scope.currentIndex);
};
$scope.signs=[“白羊座”、“金牛座”、“双子座”、“巨蟹座”、“狮子座”、“处女座”、“天秤座”、“天蝎座”、“射手座”、“摩羯座”、“水瓶座”、“双鱼座”]；
$scope.currentIndex=0；
$scope.gotsrolled=函数（）{
var itemLength=$scope.signs.length，
集装箱高度=100，
viewingItemNumberObj={“最小”：itemLength+1，“最大”：0}；
//应用类，具体取决于它们在容器中是否可见
$.each（$（“.sign”），函数（）{
if（$（this.position（）.top<0 | |$（this.position（）.top>容器高度-10）{
$（this.addClass（“notInView”）；
$（this.removeClass（“inView”）；
}否则{
$（此）.addClass（“inView”）；
$（this.removeClass（“notInView”）；
}
});
//获取滚动条中显示的最小和最大obj位置
$.each（$（“.inView”），函数（）{
var theIndex=$scope.signs.indexOf（$（this.text（））；
如果（索引=viewingItemNumberObj.min&&viewingItemNumberObj.maxAdd
之后
它会起作用的
请参阅它可能不会触发摘要
循环-将其包装在$timeout
中。你是我的储蓄者！
$scope.$apply();
$scope.currentIndex = Math.floor((viewingItemNumberObj.min + viewingItemNumberObj.max) / 2);