角度表达与ng模型冲突

时间:2015-06-05 08:26:19

标签: angularjs twitter-bootstrap angular-ui-bootstrap

我有一个模态:

<%@taglib tagdir="/WEB-INF/tags" prefix="tags"%>
<%@taglib uri="/WEB-INF/tlds/fields.tld" prefix="fields"%>

 <div class="row-fluid sortable">
    <div class="box span12">
        <div class="box-content">
        <form class="form-horizontal" name="brandform" action='/admin.brands/update' data-toggle="validate" method="post">
            <fields:form formName="brand.id.form"> 
                <input type="hidden" name="brandid" value="{{item.brandid}}"/>
            </fields:form> 
            <fields:form formName="brand.form">  
                <div class="section-heading"></div>
                <div class="control-group">
                    <label class="control-label" for="selectError"><tags:label text="name"/> *</label>
                    <div class="controls">

                        <input name="name" value="{{item.name}}" required/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
                    <div class="controls">
                        <input type="checkbox" ng-checked="item.isactive" name="isactive" value="1"/>

                    </div>
                </div>
            </fields:form> 
                <div class="form-actions">
                    <a ng-click="cancel()" class="btn btn-ext-lightblue"><tags:label text="close"/></a>
                    <a ng-click="ok()" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></a>
                </div>
        </form>
    </div>
</div>
</div>

及其模态控制器:

app.controller("BrandCtrl", function ($scope, $http, $modal) {
    $scope.animationsEnabled = true;
    $scope.open = function (id) {
        var modalInstance = $modal.open({
            animation: $scope.animationsEnabled,
            templateUrl: '/admin.brands/edit',
            controller:gg,
            resolve: {
                item: function($http) {
                    return $http.get('/admin.brands/getJsonBrandAndEdit?brandid=' + id)
                        .then(function(response) {
                            return response.data;
                        });
                }
            }
        });
    }
});

var gg = function ($scope, $modalInstance, $http, item) {
    $scope.item  =  item;

    $scope.ok = function () {
        $http.post('/admin.brands/updateBrandAndGetJSON', {id:$scope.brandid, name:$scope.brandname, isactive:$scope.isactive}).
          success(function(data, status, headers, config) {}).
          error(function(data, status, headers, config) {});
        $modalInstance.close();
    };
    $scope.cancel = function () {
        $modalInstance.dismiss();
    };
}

这样我无法在$ scope.ok函数的$ http.post中获取输入值,所以我尝试添加ng-models来形成模态字段

   
<%@taglib tagdir="/WEB-INF/tags" prefix="tags"%>
<%@taglib uri="/WEB-INF/tlds/fields.tld" prefix="fields"%>

 <div class="row-fluid sortable">
    <div class="box span12">
        <div class="box-content">
        <form class="form-horizontal" name="brandform" action='/admin.brands/update' data-toggle="validate" method="post">
            <fields:form formName="brand.id.form"> 
                <input type="hidden" ng-model="item.brandid" name="brandid"/>
            </fields:form> 
            <fields:form formName="brand.form">  
                <div class="section-heading"></div>
                <div class="control-group">
                    <label class="control-label" for="selectError"><tags:label text="name"/> *</label>
                    <div class="controls">

                        <input name="name" ng-model="item.name" required/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
                    <div class="controls">
                        <input type="checkbox" ng-model="item.isactive" ng-checked="item.isactive" name="isactive" value="1"/>

                    </div>
                </div>
            </fields:form> 
                <div class="form-actions">
                    <a ng-click="cancel()" class="btn btn-ext-lightblue"><tags:label text="close"/></a>
                    <a ng-click="ok()" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></a>
                </div>
        </form>
    </div>
</div>
</div>

但现在,我无法将模态控制器中的值加载到输入字段。

ng-model和表达式冲突。

如何从模态控制器加载值并将其输入ok函数?

1 个答案:

答案 0 :(得分:0)

试试这个,

  1. 删除使用的表达
  2. 在控制器中,设置$ scope.item后,将brandid称为4CSA-7GFJ-YMW4-2VTF-II5Q-BNTA♥♦
  3. 同样适用于其他领域。

    OR

    在您当前的方法中,您可以在设置$ scope.item之后尝试给$ scope。$ apply();这是一种间接方法。不需要这样做。