Angularjs UI标签集范围不更新 [英] Angularjs ui tabset scope not updating

查看:132
本文介绍了Angularjs UI标签集范围不更新的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用的角度UI引导标签。
所有工作正常,但我注意到标签内的文本框没有更新,虽然采用NG-模型的范围。

I am using tabs from angular ui bootstrap. All works fine but I noticed that text boxes inside the tab is not updating the scope although using ng-model.

我搜索,发现,这是因为儿童的范围和使用obj.property符号而具有约束力的意见。

I searched and found out that it is because of child scope and advise of using obj.property notation while binding.

但还是我的模型不被更新。

but still my model is not being updated.

请指引我要去的地方错了。

Please guide where I am going wrong.

wbProcess.controller ("createProCtrl", function ($scope, $http, global, user){

$scope.project = [{protitle :""},
                  {prodesc : ""},
                  {chkarchive : false}
                 ];

$scope.tab = true;

$scope.upurl;

$scope.createpro = function(){
    $http({
        url: global.apiurl+"pro/create",
        method: "POST",
        data: {'name': $scope.project.protitle, 'prodesc': $scope.project.prodesc, 'owner': user.user_id , 'active': $scope.project.chkarchive}
    }).success(function (data, status, headers, config) {
             // assign  $scope.persons here as promise is resolved here
            //$log.log(data);
            if(data.status > 0){
                $scope.tab = false;

                }
            else{

            }
        }).error(function (data, status, headers, config) {
            $scope.status = status;
            $log.log(status);
        });
}


});

HTML是

<tabset>
<tab>
    <tab-heading>
        <i class="green icon-edit bigger-110"></i>Description
    </tab-heading>
    <div>
                                <form name="createProForm" class="form-horizontal">

                                    <div class="control-group span7">
                                            <label class="control-label" for="form-field-1">Title</label>

                                        <STYLE type="text/css">
                                               .ng-dirty.ng-valid ~ span.ok { color:green; display:inline; }
                                               .ng-dirty.ng-invalid ~ span.ko { color:red; display:inline; }
                                        </STYLE>

                                        <div class="controls">
                                            <input type="text" name="protitle" id="projecttitle" ng-model="project.protitle" ng-unique="projects" placeholder="Title" required />

                                            <span class="red" ng-show="createProForm.protitle.$error.unique" >
                                                &nbsp;&nbsp;<i class="red icon-asterisk bigger-110"></i>&nbsp;Project Title already exists.</span>
                                            <!--<span class="green" ng-show="createProForm.protitle.$error.unique === false" >
                                                &nbsp;&nbsp;<i class="green icon-asterisk bigger-110"></i>&nbsp;Available</span>
                                            -->
                                        </div>

                                    </div>

                                    <div class="control-group span5">

                                        <div class="controls">
                                            <input class="ace" type="checkbox" id="id-disable-check" ng-model="project.chkarchive"  tabindex="-1"/>
                                            <label class="lbl" for="id-disable-check"> Archive Project</label>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label class="control-label" for="form-field-9">Project Description</label>

                                        <div class="controls">
                                            <textarea class="span7" id="projecttitle" ng-model="project.prodesc" maxlength="100" placeholder="100 Character Limit" required></textarea>
                                        </div>
                                    </div>

                                    <div class="form-actions">
                                        <button class="btn btn-info" type="button" ng-disabled="createProForm.protitle.$pristine || createProForm.protitle.$dirty && createProForm.protitle.$error.unique === true" ng-click="createpro()">
                                            <i class="icon-ok bigger-110"></i>
                                            Save
                                        </button>

                                        &nbsp; &nbsp; &nbsp;
                                        <button class="btn" type="reset">
                                            <i class="icon-undo bigger-110"></i>
                                            Reset
                                        </button>
                                        <button class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
                                    </div>
                                    </form>
                            </div>
</tab>

<tab disabled = "tab">
    <tab-heading>
        <i class="green icon-cogs bigger-110"></i>Configuration
    </tab-heading>
    <div>
                                <div class="span6">
                                    hi
                                </div>
                                <div id="dropzone" class="span6">
                                    <input type="hidden" id="upurl" value="{{ upurl }}" /> 
                                    <form action="/not-found" class="dropzone">
                                        <div class="fallback">
                                            <input name="file" type="file" multiple/>
                                        </div>
                                    </form>
                                </div>
                            </div>
</tab>

<tab disabled = "tab">
    <tab-heading>
        <i class="green icon-group bigger-110"></i>Users
    </tab-heading>
    <div>
                                <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
                            </div>
</tab>

文本输入仅在第一个选项卡。

The text input is only in first tab.

推荐答案

有一个解决方案来访问它。
您可以使用以下语法在你的控制器访问它。
$范围。$$ childHead。$$ nextSibling.yourVariablename。

There is one solution to access it. You can access it using the following syntax in your controller. $scope.$$childHead.$$nextSibling.yourVariablename.

例如你有NG-模式=状态html页面上,你可以访问它像这样

For example you have ng-model="state" on html page you can access it like this

$范围。$$ childHead。$$ nextSibling.state

$scope.$$childHead.$$nextSibling.state

这篇关于Angularjs UI标签集范围不更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆