javascript - ui-if 与 ng-model 冲突？

Question

非常简单的代码:

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

对于 Controller 来说:

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

奇怪的是，ng-change 有效，但 ng-model 无效。当我输入输入时，它只是将字符串 SDF 一遍又一遍地记录到控制台，因为模型没有改变。

有什么想法吗？

Answer 1

似乎 ui-if 正在创建一个像 ng-if 那样的子作用域。因此，外部 memberId 作用域将不同于 ui-if 中存在的 ng-model。 在这种情况下，您需要在定义 ng-model 时遵循 点规则。基本上当它创建一个子作用域时，它通常是从父作用域继承的。并且原型(prototype)继承适用于object类型而不适用于原始类型

要使其正常工作，您需要在 Controller 内定义对象，如 $scope.model ={} 并在其中定义所有属性。

标记

<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.