数据绑定在 Selectbox 视图模板中不起作用

Question

我的查看代码文件settings.html:

<select ng-model="language" ng-options="item.ID as item.NAME for item in allLanguages">

下面是我的控制器 JS 文件中的代码。

var app = angular.module('index.controllers', ['ionic']);

app.run(function($rootScope, $ionicModal) {
    $rootScope.allLanguages = [{
            'ID': "en",
            "NAME": "English"
        }, {
            'ID': "ta-IN",
            "NAME": "Tamil"
        }];

    $rootScope.language = $rootScope.allLanguages[1];

    $ionicModal.fromTemplateUrl('templates/settings.html', {
       scope: $rootScope,
       animation: 'slide-in-up'
    }).then(function(modal) {
       $rootScope.modal = modal;
    });


    $rootScope.showSettings = function() {
        $rootScope.modal.show();
    }

    $rootScope.closeSettingsModal = function() {
        // always empty object here
        console.log("Lang:" + JSON.stringify($rootScope.language));

        $rootScope.modal.hide();
    }
}

问题：

分配给 rootScope 的 allLanguages 对象数组由定义为 settings.html 的模板视图文件访问。使用该数组在 select 框中填充值。所以这证实了一种数据绑定方式工作正常。

但是在我的代码中 $rootScope.language 总是空的。更新后的值不存在于其中。我做错了什么？

PS: 此代码是大型应用程序的一部分，因此很难将其隔离以创建 fiddle 并重现错误。

Answer 1

我猜你漏掉了一个点。因为 $rootScope 和你的 ng-model 指令之间可能有多层作用域。 ng-model 将在它遇到的第一个作用域上创建 "language" 变量，并且不会委托 $rootScope 进行搜索。如果我的猜测是正确的，解决方案很简单，只需要一个附加到 $rootScope 的对象，您将向其附加语言变量。

$rootScope.someObject = { language: '' }

并像这样在模板中使用它ng-model="someObject.language"

数据绑定在 Selectbox 视图模板中不起作用

Data binding not working in Selectbox view template

angularjs

ionic-framework