Question

由于某些原因，绑定不会对指令中ng-if块内的输入起作用

所以这个，不起作用：

app.directive 'foo', ->
    restrict: 'E'
    scope:
       type:'='
    template: "<input ng-if=\"type === 'string'\" ng-model='filterText'>
                  <div> {{filterText}} </div>"


<foo type="'string'" />

它在指令之外或没有ng-if之外正常工作。在ng-if无效的div中包含输入。这是一个错误吗？

jsbin link

Answer 1

这是由于ng-if引入了一个新的范围，结合了你的模型“没有点在其中”这一事实。

这有效：

template: "<div ng-init='holder={}'> <input ng-if=\"type === 'string'\" ng-model='holder.filterText'></div>
               <div> {{holder.filterText}}</div>"

请参阅https://docs.angularjs.org/api/ng/directive/ngIf处的指令信息，并注意文本“此指令创建新范围”。对于“dot-in-model”，请参阅示例 Does my ng-model really need to have a dot to avoid child $scope problems? 要么 https://egghead.io/lessons/angularjs-the-dot 基本上，在读取值时，将正确读取范围原型，但在修改值时，它将被写入自己的范围。

Answer 2

由于ng-if创建了一个新范围，您只需要执行此操作

ng-model='$parent.filterText'

另外，请检查此answer。

Answer 3

示例中未关闭<div>标记，ng-if也未应用于该节点。

试试这个：

template: "<input  ng-model='filterText'>
                  <div ng-if=\"type === 'string'\"> {{filterText}}"</div>"

绑定在ng-if内停止输入

3 个答案: