AngularJS双向数据嵌套指令绑定 [英] AngularJS Two-way Data Binding in Nested Directives

查看：150
本文介绍了AngularJS双向数据嵌套指令绑定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

请让我知道如果你需要更多的信息，或者要我澄清什么。我已经尝试了很多不同的东西摸不着头脑，但还没有找到一个解决方案。

我是比较新的angularJS，我想建立一个应用程序的数据几层。我已经储存在体内的控制器的PageController范围的一些基本的用户信息。然后，我有一个设置窗体，在使用$ routeParams（带控制器SettingsController）负载，其中包括对模板的目的一对自定义指令。由于指令嵌套，我使用transclusion先装入的第二个里面。这一切都似乎是正常的工作。

我的问题是，我想从最里面的指令中引用的字段 user.firstname 并要使用双向数据绑定，以允许对文本所做的更改导致在的PageController范围值来改变。我知道很多这类问题都是由在NG-模型中使用的原语引起的，但我试图把一个额外的对象中的一切，让我引发原型继承无济于事。我在做什么错在这里？

下面是我的code的的jsfiddle ，剥离下来尽可能隔离问题。在本实施例中，如果我在外面文本框，这是直接在的PageController范围键入，它将修改内文本直到该文本框被修改时，在其上连接中断。这似乎就像使用在其他问题中描述的原语的问题，但我无法揣摩出的问题就在这里。

的 HTML 的

 ＆LT;体类=事件的上市NG-应用=应用程序NG控制器=的PageController＆GT;
    ＆LT; D​​IV CLASS =挂牌事件总结＆GT;
        ＆LT;输入类型=文本NG模型=user.firstname/＆GT;
        ＆LT; D​​IV NG控制器=SettingsController＆GT;
            ＆lt;节块标题={{data.updateInfo.title}}描述={{data.updateInfo.description}}＆GT;
                ＆LT; D​​IV标签formrow ={{data.updateInfo.labels.firstname}}TYPE =为textInputVALUE =user.firstname＆GT;＆LT; / DIV＆GT;
            ＆LT; /节＆gt;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; /身体GT;

的角指令：的

  app.directive（'formrow'，函数（）{
返回{
    范围： {
            标签：@label
            类型：@type
            值：=价值
    }，
    更换：真实，
    模板：'＆LT; D​​IV CLASS =表格行＆GT;' +
            '＆LT; D​​IV CLASS =形标签的数据-NG-秀=标签＆GT; {{标签}}＆​​LT; / DIV＆GT;' +
            '＆LT; D​​IV CLASS =形式入境关于=输入＆GT NG-开关; +
                '＆LT;输入类型=文本NG模型=值数据-NG-开关时=为textInput/＆GT;' +
            '＆LT; / DIV＆GT;' +
        '＆LT; / DIV＆GT;'
}
}）;
app.directive（'堵'，函数（）{
返回{
    范围： {
            标题：@title
            介绍：@description
    }，
    transclude：真实，
    更换：真实，
    模板：'＆LT; D​​IV CLASS =页面块＆GT;' +
            '＆LT; H2数据-NG-秀=标题＆GT;的{{title}}＆LT; / H＆GT;' +
            '＆LT; p =班的形式，描述数据-NG-秀=描述＆GT; {{说明}}＆LT; / P＆GT;' +
            '＆LT; D​​IV CLASS =块内部数据-NG-transclude＆GT;＆LT; / DIV＆GT;' +
            '＆LT; / DIV＆GT;'
}
}）;

的角控制器：的

  app.controller（的PageController功能（$范围）{
    $ scope.user = {
        姓：约翰
    };
}）;
app.controller（SettingsController功能（$范围）{
    $ scope.data = {
        更新信息： {
            标题：更新您的信息，
            介绍：这里的说明，
            标签： {
                姓：名
            }
        }
    }
}）;


解决方案

我为previous code抱歉。试试这个： http://jsfiddle.net/CxNc2/2/

不是传递实际值的，我现在传递对象+指针内正确的值。我说'refobject'在这里：

 ＆LT;体类=事件的上市NG-应用=应用程序NG控制器=的PageController＆GT;
    ＆LT; D​​IV CLASS =挂牌事件总结＆GT;
        ＆LT;输入类型=文本NG模型=user.firstname/＆GT;
        ＆LT; D​​IV NG控制器=SettingsController＆GT;
            ＆lt;节块标题={{data.updateInfo.title}}描述={{data.updateInfo.description}}＆GT;
                ＆LT; D​​IV标签formrow ={{data.updateInfo.labels.firstname}}TYPE =为textInputrefobj ='用户'值=名字＆GT;＆LT; / DIV＆GT;
            ＆LT; /节＆gt;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; /身体GT;

和我说这里refobj +值：

  app.directive（'formrow'，函数（）{
    返回{
        范围： {
            标签：@label
            类型：@type
            值：@value
            refobj：=
        }，
        更换：真实，
        模板：'＆LT; D​​IV CLASS =表格行＆GT;' +
            '＆LT; D​​IV CLASS =形标签的数据-NG-秀=标签＆GT; {{标签}}＆​​LT; / DIV＆GT;' +
            '＆LT; D​​IV CLASS =形式入境关于=输入＆GT NG-开关; +
        '＆LT;输入类型=文本NG模型=refobj [值]数据-NG-开关时=为textInput/＆GT;' +
            '＆LT; / DIV＆GT;' +
        '＆LT; / DIV＆GT;'
    }

Please let me know if you need more information or want me to clarify anything. I have tried a lot of different things to figure this out but haven't found a solution.

I'm relatively new to angularJS and I am trying to build an app with several layers of data. I have some basic user information stored in the scope of the body on controller PageController. I then have a settings form that loads in using $routeParams (with controller SettingsController) that includes a couple of custom directives for templating purposes. Since the directives are nested, I am using transclusion to load the second one inside of the first. This all seems to be working alright.

My problem is that I am trying to reference the field user.firstname from within the innermost directive and want to use two-way databinding to allow changes made to the textbox to cause the value at the PageController scope to change as well. I know that a lot of these kinds of problems are caused by using primitives in ng-model, but I have tried putting everything within an extra object so that I trigger prototypal inheritance to no avail. What am I doing wrong here?

Here's a JSFiddle of my code, stripped down as much as possible to isolate the problem. In this example, if I type in the outside textbox, which is directly on the PageController scope, it will modify the inner textbox until that textbox is modified, upon which the connection is broken. This seems just like the problem of using primitives as described in other questions, but I can't figure out where the issue is here.

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>

Angular Directives:

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>'
}
});

Angular Controllers:

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"
            }
        }
    }
});

解决方案

I'm sorry for the previous code. Try this instead: http://jsfiddle.net/CxNc2/2/

Instead of passing the actual value, I'm now passing the object + a pointer to the correct value inside. I added 'refobject' here:

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

and I added refobj + value here:

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

这篇关于AngularJS双向数据嵌套指令绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆