javascript - ng-model 不更新值

Question

我有一个下拉菜单，应该更改 slider ( Angular 光滑)。选择菜单显示选项，做出选择后幻灯片不会更新。我使用的是 Angular 1.3.0。

我相信我已经将范围缩小到模型不更新值。

这是我的 html:

<select class="form-control" ng-options="d.id as d.category for d in draggableObjects | object2Array | orderBy:'id'" ng-change="updateSlide()" ng-model="selectedSlideId"></select>

            <slick class="slider" objs="obj" data="draggableObjects" settings="slickConfig" ng-if="slideLoaded">
                <li ng-repeat="obj in draggableObject.item" class="draggable-item slide">
                    <div ng-drag="true" ng-drag-data="obj" data-allow-transform="true">
                        <img ng-src="{{obj.src}}" alt="{{obj.name}}">
                        {{obj.name}}
                    </div>
                </li>
            </slick>

这里是应该更新模型以触发 ng-change 的 init 和函数:

// selection from the select dropdown
        $scope.$watch('selectedSlideId', function(newVal, oldVal) {
            if (newVal !== oldVal) {
                $scope.draggableObject = $scope.draggableObjects[newVal];
                console.log('finally!');
            } else {
                $scope.draggableObject = $scope.draggableObjects[1];
                console.log('id not updated');
            }
        });
        // init dashboard
        $scope.selectedSlideId = '1';

这是正在排序的 json 对象:

// draggable objects
    $scope.draggableObjects = {
        1: {
            id: '1',
            category: 'Slider',
            item: [
                {name:'slider one', src: 'images/placeholderslider.png'},
                {name:'slider two', src: 'images/placeholderslider2.png'},
                {name:'slider three', src: 'images/placeholderslider3.png'},
                {name:'slider four', src: 'images/placeholderslider4.png'},
                {name:'slider five', src: 'images/placeholderslider5.png'}
            ]
        },
        2: {
            id: '2',
            category: 'News',
            item: [
                {name:'news one', src: 'images/placeholdernews.png'},
                {name:'news two', src: 'images/placeholdernews2.png'},
                {name:'news three', src: 'images/placeholdernews3.png'},
                {name:'news four', src: 'images/placeholdernews4.png'},
                {name:'news five', src: 'images/placeholdernews5.png'}
            ]
        }
    };

Angular slick 似乎正在使用 ng-if 和超时进行更新:

// init and reInit slick
    $scope.slideLoaded = true;
    $scope.updateSlide = function() {
        $scope.slideLoaded = false;
        console.log('slide update');
        $timeout(function() {
            $scope.slideLoaded = true;
        });
    };

在控制台中，我收到“id 未更新”(来自选择初始化)，并且当从下拉列表中进行选择时收到“幻灯片更新”，而我还应该看到“终于!”从模型更改所选值。

感谢任何帮助。

Answer 1

我在使用 $scope.$watch('modelname' ,.. 时也遇到过这个问题。我目前将此函数用作 -

$scope.$watch(
   function(){ return $scope.modelname;}, function(newVal, oldVal){
   ....... 
   }
)

编写一个函数来返回model来代替modelname(字符串)。这永远不会失败。