gpt4 book ai didi

angularjs - Angular 指令 : using ng-model within isolate scope

转载 作者:行者123 更新时间:2023-12-02 19:16:10 24 4
gpt4 key购买 nike

我在弄清楚如何定义一个自定义指令时遇到了困难:

  1. 使用隔离范围,并且
  2. 在其模板的新范围内使用 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>'
}
});

这里期望的行为是输入的值通过指令的(隔离)范围 model 属性绑定(bind)到外部范围的 foo.bar 属性。这种情况不会发生,因为模板的封闭 div 上的 ng-if 指令创建了一个新作用域,因此更新的是该作用域的 model,而不是指令的作用域。通常,您可以通过确保表达式中有一个点来解决这些 ng-model 问题,但我在这里看不到任何方法可以做到这一点。我想知道我是否可以在我的指令中使用这样的东西:

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

但这不起作用...

Plunker

最佳答案

你是对的 - ng-if 创建一个子作用域,当在输入文本字段中输入文本时,该子作用域会导致问题。它在子作用域中创建一个名为“model”的影子属性,该属性是具有相同名称的父作用域变量的副本 - 有效地破坏了双向模型绑定(bind)。

解决这个问题很简单。在您的模板中,指定 $parent 前缀:

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

这确保它将从 $parent 范围解析“模型”,您已经通过隔离范围设置了双向模型绑定(bind)。

最后,“.”在 ng-model 中拯救了这一天。我发现将点中剩下的任何内容作为 Angular 通过作用域继承解析属性的一种方式是很有用的。如果没有点,只有在分配范围变量时解析属性才会成为问题(否则,查找就可以,包括只读 {{model}} 绑定(bind)表达式)。

关于angularjs - Angular 指令 : using ng-model within isolate scope,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24265842/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com