ui-如果与ng-model冲突？

Question

Very simple code:

    <div ui-if="showMemberId">
        <input ng-model="memberId" ng-change="test()" id="memberId" name="memberId" class="text" type="text">
    </div>

With this for the controller:

$scope.memberId = 'SDF';
$scope.test = function test(){
    console.log($scope.memberId);
};
$scope.showMemberId = true;

Bizarrely, the ng-change works but not the ng-model . When I type into the input, it just logs the string SDF to the console over and over because the model isn't changing.

Any ideas?

Answer 1

Seems like ui-if is creating a child scope like ng-if does. So the outer memberId scope will be different than ng-model present inside the ui-if . In such cases you need to follow the dot rule while defining ng-model . Basically when it creates a child scope, its protypically inherited from parent scope. And prototypal inheritance works on object type not on primitive types

To make it working you need to define object inside controller like $scope.model ={} & define all the property in it .

Markup

<div ui-if="showMemberId">
    <input ng-model="model.memberId" ng-change="test()" 
     id="memberId" name="memberId" class="text" type="text"/>
</div>

Controller

$scope.model = {}; //made an object type model

I'd encourage you to use ng-if instead of ui-if , as angular does provide the same functionality.