2015-02-09 85 views
0

我查看代码文件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被定义为settings.html模板视图文件访问的allLanguages对象阵列。值在使用该数组的选择框中填充。所以这证实了数据绑定的一种方式工作正常。

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

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

+0

模板嗯,我不知道,如果你是显示所有的HTML或不是,但你需要关闭标签。我尝试了一个使用$ scope而不是$ rootScope的示例,它工作得很好。 – Scott 2015-02-09 18:46:30

回答

1

我的猜测是你错过了一个点。由于$ rootScope和ng-model指令之间可能有层次的范围。 ng-model将在它遇到的第一个作用域上创建“language”变量,并且不会委托给$ rootScope进行搜索。如果我的猜测是正确的,那么解决方案很简单,只需要一个连接到$ rootScope的对象,您将为其附加语言变量。

$rootScope.someObject = { language: '' }

,并用它在这样ng-model="someObject.language"

+0

你能解释一下吗? $ rootScope.someObject对应于我的代码的哪一部分? – Purus 2015-02-09 18:40:42

+0

如果范围不会委托给更高级别,我想知道设置值的单向绑定是如何工作的? – Purus 2015-02-09 18:42:16

+0

而不是只把变量放在$ rootScope'$ rootScope.language = $ rootScope.allLanguages [0]'上,首先将它包装在一个对象中,然后才把包装对象放在$ rootScope上。 – getOffMyLawn 2015-02-09 18:43:47