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

2024-04-24

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

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

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

这是一个JSFiddle http://jsfiddle.net/CxNc2/我的代码,尽可能地精简以隔离问题。在此示例中,如果我在直接位于 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"
            }
        }
    }
});

我对之前的代码感到抱歉。试试这个:http://jsfiddle.net/CxNc2/2/ 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>'
    }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS 嵌套指令中的双向数据绑定 的相关文章

随机推荐

  • 缺少 Haskell 原语来连续将函数应用于列表的每个元素?

    在 Haskell 中 众所周知map原语可用于将给定函数应用于all列表的元素 gt map toUpper abcd ABCD gt 在尝试生成有限集 列表 的所有分区时 以下类似的原语会很方便 gt sap toUpper abcd
  • MySQL 中的一对多查询

    在 MySQL 中查询一对多的最佳方式是什么 这是我正在开发的数据库的简化版本 如果有什么看起来不对劲告诉我 CREATE TABLE Tenant tenant id int NOT NULL first name varchar 20
  • JAVA 中的四舍五入

    我想四舍五入 ex 的值 12 166666 gt 12 00 12 49999 gt 12 00 12 5111 gt 13 00 12 9999 gt 13 00 我想将 50 派塞四舍五入 你可以看看Math round double
  • 在cocos2D游戏环境中应用缩放效果?

    我正在开发一款游戏cocos2D游戏引擎并加载所有sprites当它加载关卡时 现在因为一些sprites 障碍物 高于 320 像素 因此看起来很难检查出来 所以为了方便起见我想申请ZOOM IN and ZOOM out效果 一次最小化
  • C# 动态创建 LinkBut​​ton 命令事件处理程序

    所以我这里有一个奇怪的情况 我有一个 System Web UI WebControls WebParts EditorPart 类 它呈现一个 搜索 按钮 当您单击此按钮时 它的 clickHandler 方法会执行数据库搜索 并为其返回
  • ND 输入的 im2col 算法

    我正在尝试为输入维度 gt 2D 编写自己的 im2col 算法 目前我正在研究 Matlab im2col 的实现 但是 我找不到任何有关二维以上输入的情况的文档 如果我将 3D 张量输入到函数中 我确实会得到输出 不过我不太明白你是如何
  • 使用 javascript 下载时 PDF 为空

    我有一个 Web 服务 可以在其响应中返回 PDF 文件内容 当用户单击链接时 我想将其下载为 pdf 文件 我在UI中编写的javascript代码如下 http get http MyPdfFileAPIstreamURl then f
  • 播放声音 Javascript/Jquery

    我正在构建一个基于 Ajax 的应用程序 它将在我们的本地 Intranet 网络上运行 现在 每次 Ajax 返回请求时 我都需要在客户端浏览器中播放声音 我想将声音文件 mp3 wav 放入我的 Web 服务器 Tomcat 目录中 应
  • React:获取 contentEditable div 内文本的值

    我正在使用一个contentEditablediv 并希望在调用提交时获取其中的文本 我试过this refs textarea value trim 但这似乎不起作用 我的代码在渲染返回中如下 div div
  • 在Python和XML中递归搜索父子组合并构建树

    我正在尝试遍历这个充满父子关系的 XML 数据 并且需要一种方法来构建树 任何帮助将不胜感激 另外 在这种情况下 父 gt 子关系有属性还是节点更好
  • 将原始 Scapy 数据解码为人类可读的数据

    我正在尝试改用 Scapy 而不是 Wireshark 但在解码我收到的数据时遇到问题 在 Wireshark 中 我可以轻松看到过滤数据包的最后一层 标记为 分布式交互式模拟 但在 Scapy 中 最后一层是 原始 我试图以相同的人类可读
  • 使用 jQuery 选择

    1天前我在这里问了一个大问题 但没有得到足够好的答案 所以我把问题分成几个部分 这是其中一部分 看看这段代码 div div div div
  • 如何在现有 UIKit 类(例如 UIColor)的扩展中添加初始值设定项?

    Swift 文档说 在扩展中添加初始值设定项是可能的 文档中的示例是关于将初始值设定项添加到struct Xcode 无法识别UIColor在我的便利初始化程序中指定的初始化程序 extension UIColor convenience
  • document.body.style.marginTop 在 JS 中返回空白字符串

    据我了解 some elem style maginTop 将返回带有元素上边距的字符串 相反 我总是得到一个空字符串 我想在 body 上使用它 但我也尝试在 div 上使用 但这也不起作用 console log document bo
  • 交错顶点提交如何提高性能?

    我已经阅读并看到了其他问题 这些问题通常都指向将顶点位置和颜色等交错到一个数组中的建议 因为这可以最大限度地减少从 cpu 发送到 gpu 的数据 我不清楚的是 即使使用交错数组 您仍然必须对位置和颜色指针进行单独的 GL 调用 OpenG
  • create-react-app/express 代理错误:无法代理请求(ECONNRESET)

    我使用 create react app 创建了一个 React 应用程序 并使用express generator 创建了一个 Express 服务器 我的反应应用程序正在运行http 本地主机 3000 http localhost 3
  • iText 设置加密错误

    我最近不得不升级到 iText 但在让 setEncryption 工作时遇到问题 我正在使用 iText 5 5 6 document new Document PageSize LETTER 36 36 72 72 writer Pdf
  • Servlet和路径参数如/xyz/{value}/test,如何在web.xml中映射?

    servlet是否支持url如下 xyz value test 其中值可以用文本或数字替换 如何在 web xml 中映射它 最好的选择是 URL 模式 xyz The 服务程序接口 https jakarta ee specificati
  • 使用 libgit2sharp 从分支中提取最新版本

    我在 C 解决方案中使用 libgit2sharp 切换到分支并提取最新更改 这是我正在使用的代码 public void FetchAll using var repo new Repository LocalGitPath foreac
  • AngularJS 嵌套指令中的双向数据绑定

    如果您需要更多信息或希望我澄清任何事情 请告诉我 我尝试了很多不同的方法来解决这个问题 但还没有找到解决方案 我对 angularJS 比较陌生 我正在尝试构建一个具有多层数据的应用程序 我在控制器 PageController 的主体范围