Javascript 嵌套指令中的AngularJS双向数据绑定_Javascript_Angularjs_Data Binding_Web Applications_Angularjs Scope

Javascript 嵌套指令中的AngularJS双向数据绑定

javascript angularjs data-binding web-applications

Javascript 嵌套指令中的AngularJS双向数据绑定,javascript,angularjs,data-binding,web-applications,angularjs-scope,Javascript,Angularjs,Data Binding,Web Applications,Angularjs Scope,如果您需要更多信息或需要我澄清任何事情，请让我知道。我尝试了很多不同的方法来解决这个问题，但没有找到解决办法我对angularJS比较陌生，我正在尝试构建一个包含多层数据的应用程序。我有一些基本的用户信息存储在controller页面controller的body范围内。然后，我有一个设置表单，它使用$routeParams（带有controller SettingsController）加载，其中包括两个用于模板化的自定义指令。由于指令是嵌套的，所以我使用transclusion在第一个指令

如果您需要更多信息或需要我澄清任何事情，请让我知道。我尝试了很多不同的方法来解决这个问题，但没有找到解决办法

我对angularJS比较陌生，我正在尝试构建一个包含多层数据的应用程序。我有一些基本的用户信息存储在controller页面controller的body范围内。然后，我有一个设置表单，它使用$routeParams（带有controller SettingsController）加载，其中包括两个用于模板化的自定义指令。由于指令是嵌套的，所以我使用transclusion在第一个指令中加载第二个指令。这一切似乎都很正常

我的问题是，我试图从最内部的指令中引用字段

user.firstname

，并希望使用双向数据绑定来允许对文本框所做的更改导致PageController作用域中的值也发生更改。我知道在ng模型中使用原语会导致很多此类问题，但我尝试将所有内容都放在一个额外的对象中，这样触发原型继承就没有用了。我做错了什么

下面是我的一段代码，尽可能精简以隔离问题。在本例中，如果我直接在PageController作用域中键入外部文本框，它将修改内部文本框，直到该文本框被修改，连接被中断。这看起来就像在其他问题中描述的使用原语的问题，但我不知道问题在哪里

HTML:

对不起，前面的代码。请尝试以下方法：

我现在不是传递实际值，而是传递对象+指向内部正确值的指针。我在这里添加了“重新对象”：

<body class="event-listing" ng-app="app" ng-controller="PageController">
    <div class="listing-event-wrap">
        <input type="text" ng-model="user.firstname" />
        <div ng-controller="SettingsController">
            <section block title="{{data.updateInfo.title}}" description="{{data.updateInfo.description}}">
                <div formrow label="{{data.updateInfo.labels.firstname}}" type="textInput" refobj='user' value="firstname"></div>
            </section>
        </div>
    </div>
</body>

我在这里添加了REFBJ+值：

app.directive('formrow', function() {
    return {
        scope: {
            label: "@label",
            type: "@type",
            value: "@value",
            refobj: "="
        },
        replace: true,
        template: '<div class="form-row">' + 
            '<div class="form-label" data-ng-show="label">{{label}}</div>' + 
            '<div class="form-entry" ng-switch on="type">' + 
        '<input type="text" ng-model="refobj[value]" data-ng-switch-when="textInput" />' + 
            '</div>' + 
        '</div>'
    }

app.directive（'formrow'，function（）{
返回{
范围：{
标签：“@label”，
类型：“@type”，
值：“@value”，
REBOJ:“=”
},
替换：正确，
模板：“”
{{label}}}+
'' + 
'' + 
'' + 
''
}

由于指令中的文本框使用原语而不是对象作为其模型（

ng model=“value”

而不是

ng model=“someobj.somevalue”

），因此其模型仅在本地范围内创建，父对象无权访问

修复方法是使用作为对象属性定义指令文本框模型：

ng-model="value.firstname"

<div formrow ... value="user"></div>

然后将整个

user

对象传递到指令中，而不仅仅是原语属性：

ng-model="value.firstname"

<div formrow ... value="user"></div>

问题是由git文档中的ng开关引起的

ng开关作用域继承的工作原理与ng include一样双向数据绑定到父范围中的基元，使用$parent，或将模型更改为对象，然后绑定到该对象的属性这将避免子范围隐藏/隐藏父范围财产

因此，如果您在文本框中键入一些文本。以下代码将针对

ng开关执行
$scope.value=“您键入的文本”

因此，它不会参考原型链来搜索值
。这将为ng开关
范围创建一个新属性
如何证明它？
如果将value
更改为$parent.value
，一切都会正常工作。因为在基本类型的ng开关中（如果没有点，angularjs会将值
识别为基本类型）$parent
将引用formrow
指令范围
尝试移除ng开关
，或者按照医生说的去做。问题就会消失
更重要的是，文档建议我们在应用双向绑定时始终使用点
来引用模型
如果我说错了什么。请纠正我并改正。谢谢。谢谢你这么快的回复！我试过小提琴，但它似乎和我贴的一样。将它改为函数隔离作用域的目的是什么？我添加了REFBJ，所以你不必在指令中调用“firstname”，因为我确信你可以这是通用的。这真的很聪明！没有想过用数组符号代替点。这会满足我的需要。谢谢！如果可以的话，我会给这10次投票。这节省了我的时间。谢谢！嘿，我简化了你的演示，只是为了看得更清楚。它似乎适用于复杂的对象，但不适用于简单的属性..你能理解为什么吗？@Dmitry你的简单属性示例重新引入了OP的错误。简单地说，角度范围继承需要对象而不是简单的原始变量。这是JavaScript中原型继承的直接结果。你可以查看]我在别处给出的]以查看另一个示例或检查]以了解更多信息一个更详细的解释。显然我太乐观了，认为字符串可以绑定。但你是对的，在这种情况下，嵌套指令中的绑定可以完美地工作。以前，我只得到单向（初始）绑定，并且疯狂地想让它工作。+10
<div formrow ... value="user"></div>