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



我的视图代码文件设置.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的模板视图文件访问。使用该数组在选择框中填充值。因此,这证实了数据绑定的一种方式运行良好。

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

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

我的猜测是您缺少了一个点。由于$rootScope和ng模型指令之间可能有多个Scopes层。ng模型将在遇到的第一个作用域上创建"language"变量,并且不会委托$rootScope进行搜索。如果我的猜测是正确的,那么解决方案很容易,并且只需要一个附加到$rootScope的对象,您将把语言变量附加到该对象。

$rootScope.someObject = { language: '' }

并在类似ng-model="someObject.language" 的模板中使用

相关内容

最新更新