范围不是从指令和ng-if div容器中的输入字段获取模型。

Question

我想我错过了一些基本的东西。我有一个自定义指令，它有一个带有ng模型的输入。当我试图在ng更改事件中访问ng模型的值时，范围没有ng模型的属性。代表：

<input ng-model="myInput" ng-change="onChange()" />

并从控权人那里：

$scope.onChange = function() {
     console.log($scope.myInput);
}

下面是我用这个问题做的一个柱塞：http://plnkr.co/edit/EnPE7p?p=info

谢谢，e。

Answer 1

我想出来了：

因为在包含输入的div上有一个ng-if，所以ng-if创建了它自己的继承范围。因此，为了使ng模型以2种方式与输入值绑定，需要为ng模型分配一个对象。

例如，在指令的控制器中：

$scope.myInput = {};

在html中：

<input ng-model="myInput.value"... />

而不能在myInput事件中访问onChange。

下面是解决方案的更新：http://plnkr.co/edit/Gwfl0y?p=preview

希望这能帮到任何人。

Answer 2

或者将值传递给函数，如下所示

<input type="text" ng-change="onChange(myInput)" ng-model="myInput" />

$scope.onChange = function(value) {
    console.log(value);
};

Answer 3

糟了！错了！

<input type="text" og-change="onChange()" ng-model="myInput" />

应该是

<input type="text" ng-change="onChange()" ng-model="myInput" />

编辑:更新以解决评论中指出的OP问题。

问题是您使用的是一个周围的ng-if，它设置了一个独立的作用域。这意味着控制器的$scope.myInput与输入的模型不一样，因为它是一个文字。

因此，有两种解决方案，您可以删除ng-if，也可以将myInput更改为对象，该对象将被正确继承。

$scope.myInput = {
    val: ''
};

<input type="text" ng-change="onChange()" ng-model="myInput.val" />

由于我希望您需要第二个解决方案( ng-if很重要)，所以我用这个方法更新了普朗克。希望这能有所帮助！