anglejs – 角度指令：在孤立范围内使用ng模型

发布时间：2020-12-17 09:29:53 所属栏目：安全来源：网络整理

导读：我无法解决如何定义一个自定义指令：使用隔离范围,和在其范本内使用ng-model指令. 以下是一个例子： HTML： body ng-app="app" div ng-controller="ctrl" dir model="foo.bar"/dir Outside directive: {{foo.bar}} /div/body JS： var app = angular.modul

我无法解决如何定义一个自定义指令：

>使用隔离范围,和
>在其范本内使用ng-model指令.

以下是一个例子：

HTML：

<body ng-app="app">
  <div ng-controller="ctrl">
    <dir model="foo.bar"></dir>
    Outside directive: {{foo.bar}}
  </div>
</body>

JS：

var app = angular.module('app',[])
  .controller('ctrl',function($scope){
    $scope.foo = { bar: 'baz' };
  })
  .directive('dir',function(){
    return {
      restrict: 'E',scope: {
        model: '='
      },template: '<div ng-if="true"><input type="text" ng-model="model" /><br/></div>'
    }
  });

这里所需的行为是通过指令(隔离)范围模型属性将输入值绑定到外部范围的foo.bar属性.这不会发生,因为模板的包围div上的ng-if指令创建一个新的范围,所以该范围的模型被更新,而不是指令的范围.
通常,您可以通过确定表达式中有一个点来解决这些ng模型问题,但是在这里我看不到任何方法.我想知道我是否可以使用像我这样的指令：

{
  restrict: 'E',scope: {
    model: {
      value: '=model'
    }
  },template: '<div ng-if="true"><input type="text" ng-model="model.value" /><br/></div>'
}

但这不行

Plunker

您是对的 – 如果创建一个子范围,当在输入文本字段中输入文本时会导致问题.它在子范围中创建一个名为“model”的影子属性,该属性是具有相同名称的父作用域变量的副本 – 有效地打破了双向模型绑定.

这个修复很简单.在您的模板中,指定$parent前缀：

template: '<div ng-if="true">
                   <input type="text" ng-model="$parent.model" /><br/>
             </div>'

这将确保它将从$parent范围解析“模型”,您已经通过隔离的作用域设置了双向模型绑定.

最后,”.在ng模式中节省了一天.我觉得有用的是思考点的任何东西,作为Angular通过范围继承来解析属性的一种方法.没有点,当我们分配范围变量(否则,查找很好,包括只读{{model}}绑定表达式)时,解析属性只会成为一个问题.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!