ng-model 不更新值

Question

我有一个应该更改滑块（角度光滑）的下拉菜单。选择菜单正在显示选择，当做出选择时，幻灯片不会更新。我正在使用角度 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){
   ....... 
   }
)

编写function 以返回model 代替modelname（字符串）。这永远不会失败。