[英]AngularJS and Angular-UI Bootstrap tabs scope
I am using AngularJS and Angular-UI Bootstrap tabs. 我正在使用AngularJS和Angular-UI Bootstrap选项卡。 This is my controller:
这是我的控制器:
app.controller("SettingsCtrl", ['$scope','SettingsFactory','$stateParams', function($scope,SettingsFactory,$stateParams){
$scope.navType = 'pills';
$scope.saveLanguage = function()
{
console.log($scope.test.vari); // loged undefined
}
}]);
My view 我的看法
<div class="row clearfix">
<tabset>
<tab heading="Jezik">
<form role="form" name="test">
<div class="form-group">
<label for="lang">Izaberite jezik</label>
<select class="form-control" ng-model="vari">
<option>Hrvatski</option>
<option>Srpski</option>
<option>Bosanski</option>
<option>Engleski jezik</option>
<option>Njemački jezik</option>
</select>
</div>
<button type="submit" class="btn btn-default" ng-click="saveLanguage()">Save</button>
</form>
</tab>
</div>
Can someone help me to see why is loging undefined when I am using Angular-UI Bootstrap Tabs. 当我使用Angular-UI Bootstrap选项卡时,有人可以帮我看看为什么登录未定义。 Is it creating own scope.
它是否在创建自己的范围。 How tu access model value ?
如何访问模型值?
This code solved my problem (removed name atribute from form, added ng-model="test.vari", and added $scope.test= {} in my controller) : 这段代码解决了我的问题(从表单中删除了名称属性,添加了ng-model =“test.vari”,并在我的控制器中添加了$ scope.test = {}) :
<tabset>
<tab heading="Jezik">
<form role="form">
<div class="form-group">
<label for="lang">Izaberite jezik</label>
<select class="form-control" ng-model="test.vari">
<option>Hrvatski</option>
<option>Srpski</option>
<option>Bosanski</option>
<option>Engleski jezik</option>
<option>Njemački jezik</option>
</select>
</div>
<button type="submit" class="btn btn-default" ng-click="saveLanguage()">Spremi Jezik</button>
</form>
</tab>
</div>
app.controller("SettingsCtrl", ['$scope','SettingsFactory','$stateParams', function($scope,SettingsFactory,$stateParams){
$scope.navType = 'pills';
$scope.test= {};
$scope.saveLanguage = function()
{
console.log($scope.test.vari);
// SettingsFactory.update({ id:$stateParams.user_id }, $scope.language);
}
}]);
The tab creates child scopes so we need to bind it to an expression that evaluates to a model in the parent scope. 该选项卡创建子范围,因此我们需要将其绑定到一个表达式,该表达式求值为父作用域中的模型。
For this, the model must use a .
为此,模型必须使用a
.
like this: 像这样:
ng-model='object.variable'
And we must declare the object in controller's top: 我们必须在控制器的顶部声明对象:
$scope.object = {};
Example: 例:
angular.module('test', ['ui.bootstrap']); var DemoCtrl = function ($scope) { $scope.obj = {text: ''}; $scope.show = function() { alert('You typed: ' + $scope.obj.text) } };
<!doctype html> <html ng-app="test"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.0.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div ng-controller="DemoCtrl"> Value outside the tabs: {{obj.text}} <uib-tabset> <uib-tab heading="Tab 1"> <input ng-model="obj.text"> <button ng-click="show()">Show</button> </tab> </tabset> </div> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.