11

如果您需要更多信息或希望我澄清任何事情,请告诉我。我已经尝试了很多不同的方法来解决这个问题,但还没有找到解决方案。

我对 angularJS 比较陌生,我正在尝试构建一个包含多层数据的应用程序。我有一些基本的用户信息存储在控制器 PageController 的主体范围内。然后我有一个设置表单,它使用 $routeParams(带有控制器 SettingsController)加载,其中包括几个用于模板目的的自定义指令。由于指令是嵌套的,我使用嵌入将第二个加载到第一个内部。这一切似乎工作正常。

我的问题是我正在尝试引用该字段user.firstname从最里面的指令中引用该字段,并希望使用双向数据绑定来允许对文本框所做的更改导致 PageController 范围内的值也发生变化。我知道很多这类问题是由在 ng-model 中使用原语引起的,但是我尝试将所有内容都放在一个额外的对象中,以便触发原型继承无济于事。我在这里做错了什么?

这是我的代码的JSFiddle,尽可能地精简以隔离问题。在此示例中,如果我直接在 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" value="user.firstname"></div>
            </section>
        </div>
    </div>
</body>

角度指令:

app.directive('formrow', function() {
return {
    scope: {
            label: "@label",
            type: "@type",
            value: "=value" 
    },
    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="value" data-ng-switch-when="textInput" />' + 
            '</div>' + 
        '</div>'
}
});
app.directive('block', function() {
return {
    scope: {
            title: "@title",
            description: "@description" 
    },
    transclude: true,
    replace: true,
    template: '<div class="page-block">' +
            '<h2 data-ng-show="title">{{title}}</h2>' + 
            '<p class="form-description" data-ng-show="description">{{description}}</p>' + 
            '<div class="block-inside" data-ng-transclude></div>' + 
            '</div>'
}
});

角度控制器:

app.controller("PageController", function($scope) {
    $scope.user = {
        firstname: "John"
    };
});
app.controller("SettingsController", function($scope) {
    $scope.data = {
        updateInfo: {
            title: "Update Your Information",
            description: "A description here",
            labels: {
                firstname: "First Name"
            }
        }
    }
});
4

3 回答 3

11

我很抱歉之前的代码。试试这个:http: //jsfiddle.net/CxNc2/2/

我现在不是传递实际值,而是传递对象 + 一个指向内部正确值的指针。我在这里添加了“refobject”:

<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>

我在这里添加了 refobj + value:

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>'
    }
于 2013-06-19T02:36:39.293 回答
8

由于指令中的文本框对其模型(ng-model="value"而不是ng-model="someobj.somevalue")使用原语而不是对象,因此它的模型仅在本地范围内创建,并且父级无权访问它。

修复方法是使用点规则作为对象属性来定义指令文本框模型:

ng-model="value.firstname"

然后将整个user对象传递给指令,而不仅仅是原始属性:

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

这是一个演示

于 2013-06-19T02:47:52.990 回答
0

问题是由来自 gitng-switch的文档理解范围引起的。

ng-switch 范围继承就像 ng-include 一样工作。因此,如果您需要将 2 路数据绑定到父范围内的原语,请使用 $parent,或者将模型更改为对象,然后绑定到该对象的属性。这将避免子范围隐藏/隐藏父范围属性。

因此,如果您在文本框中键入一些文本。下面的代码将针对ng-switch范围执行。

$scope.value="the text you typed"

所以它不会参考原型链来搜索。value这将为ng-switch范围创建一个新属性。

如何作证?

如果您更改value$parent.value. 一切都会好起来的。因为对于原始类型(如果没有 dot ,ng-switchangularjs 会将原始类型识别为原始类型)将引用指令范围。value$parentformrow

尝试删除ng-switch或按照文档说明进行操作。问题将消失。

.更重要的是,文档建议我们在应用双向绑定时始终使用点来引用模型。

如果我说错了。请纠正我并使它正确。谢谢。

于 2014-07-17T07:29:55.713 回答