javascript - 将数据从父指令传递到子指令-6ren

javascript - 将数据从父指令传递到子指令

转载作者：行者123 更新时间：2023-11-27 22:53:44

25

4

嘿伙计们，我有一个小问题..我有一个指令，它有一个 ng-repeat 和 transinclude，并且在它的内部分隔了几个需要从迭代继承特定对象的其他指令...

我只能用scope.$parent..来做到这一点，但我不喜欢这个，因为如果父级发生变化，scope.$parent可能会乘以scope.$parent.$parent...

问题是..如何将每个迭代对象传递给子指令？我尝试过 require ，也许还有 $braodcast ..但是使用这些我无法发送特定的迭代对象...

<div demo-parent>
   <div demo-child1></div>
   <div demo-child2></div>
</div>

var demo = [obj1, obj2, obj3];

demo.directive('demoParent', [function() {
    return {
       scope: true,
       transclude: true,
       template: '<div ng-repeat="d in demo" ng-transclude></div>'
    ]
}]);

demo.directive('demoChild1', [function() {
    function link(scope, el, attr) {
         scope.someInfo = the specific info from parent; // now with scope.$parent.$parent.d
    }

    return {
       scope: true,
       transclude: true,
       template: '{{someInfo}}',
       link: link
    ]
}]);


demo.directive('demoChild2', [function() {
    function link(scope, el, attr) {
         scope.someInfo = the specific info from parent; // now with scope.$parent.$parent.d
    }

    return {
       scope: true,
       transclude: true,
       template: '{{someInfo}}',
       link: link
    ]
}]);

demoChild1 和 demoChild2 位于标记中的 demoParent 内，但有单独的指令

最佳答案

有一种方法可以做到这一点。问题的根源在于嵌入范围和模板范围。我也看到了很多讨论这个问题的优秀文章； here , here (really good one) ，和 here

另外，我遇到了一个很棒的SO question and (bottom) answer这值得99%的功劳。我只是根据您的情况进行了调整。

您的问题要求您使用子作用域，但有一种方法可以使用隔离作用域(这对您来说可能更安全)来执行此操作，我也会展示这一点。

最后，我不是 AngularJS 专家。我的答案可能不是最好的解决方案或性能最好的解决方案。您的用例绝对不寻常，您可能需要重新考虑您想要做什么(或者在您的问题中提供更多信息，也许我们可以提供更好的设计)

话不多说...出于测试目的，我简化了您的演示数组，在父指令中包含一个 Controller 来定义所述数组，并以稍微不同的方式声明我的指令。

HTML:

<body ng-app="soPOC">
    <div demo-parent>
        <div demo-child-one></div>
        <div demo-child-two></div>
    </div>

定义根模块的so.module文件:

(function () {
'use strict';
   angular.module('soPOC', []);
})();

demo-parent.directive.js 文件定义父指令:

(function () {
'use strict';

angular.module('soPOC')
    .directive('demoParent', demoParent);

demoParent.$inject = ['$compile'];

function demoParent($compile) {
    var transclude;
    var template = '<div ng-repeat="item in demos"></div>';
    var directive = {
        restrict: 'EA',
        controller: controller,
        compile: compile
    };
    return directive;

    function compile(ele) {
        transclude = ele.html();
        ele.html('');

        return function (scope, elem) {
            var tpl = angular.element(template);
            tpl.append(transclude);
            $compile(tpl)(scope);
            elem.append(tpl);
        }
    }

    //deviation from your code
    controller.$inject = ['$scope'];
    function controller($scope) {
        //test array for demo items
        $scope.demos = ['test1', 'test2'];
    }
}

})();

demo-child.directive.js 定义子指令一和二:

(function () {
'use strict';

angular
    .module('soPOC')
    .directive('demoChildOne', demoChildOne)
    .directive('demoChildTwo', demoChildTwo);

function demoChildOne() {
    var directive = {
        link: link,
        scope: true,
        restrict: 'EA',
        template: '<div>{{someInfo}}</div>'
    };
    return directive;

    function link(scope, element, attrs) {
        scope.someInfo = scope.item;
    }
}

function demoChildTwo() {
    var directive = {
        link: link,
        scope: true,
        restrict: 'EA',
        template: '<div>{{someInfo}}</div>'
    };
    return directive;

    function link(scope, element, attrs) {
        scope.someInfo = scope.item;
    }
}

})();

如果您采用隔离范围样式，那么您的 html 会发生变化，您可以从子指令中删除链接函数，并且子指令中的语法会略有变化。

HTML:

<div demo-parent>
        <div demo-child-one item="item"></div>
        <div demo-child-two item="item"></div>
    </div>

指令:

    function demoChildOne() {
    var directive = {
        scope: {
            item: '='
        },
        restrict: 'EA',
        template: '<div>{{item}}</div>'
    };
    return directive;
}

我会通读我链接的文章，以更好地理解该解决方案为何有效，并掌握模板、嵌入和指令之间的范围问题。第h

关于javascript - 将数据从父指令传递到子指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37812701/

25

4

0

文章推荐： c++ - c++ 中二维 vector 的 cout 缺失行

文章推荐： javascript - 服务器端 URL 返回空响应

文章推荐： javascript - Socket.io 发出事件不会更新 Angular 控制的元素

.net - 从父/子的平面列表构建层次结构对象
我有一个层次结构中的项目列表，我正在尝试将此列表解析为实际的对象层次结构。我正在使用modified pre-order tree traversal存储/迭代此列表，所以我拥有的是树的子集，包括所有
c# - 从父 [] 中检索所有子项
给定这个类: public class Parent { public Child[] Children {get;set;} } 还有这个数组: Parent[] parents; 如何使用 L
magento - 从父 block 获取值
我面临着一些难以完成这个看似简单的任务。我在一个嵌套块 (Suggest.phtml) 中，我想从父块 (result.phtml) 获取一个值(搜索结果的数量，以及集合计数) 我错了还是这里没有简
laravel - 从父 Controller 访问子模型
我在访问子模型重复器字段以在没有用户操作的情况下加载时遇到问题，我在父模型 Controller 中使用 RelationController这就是我在父 Controller 中所做的 class
javascript - 从父 Controller 访问指令的属性
我有一个 datetime 指令，其范围内包含两个属性:date 和 time。如何从父 Controller 访问这些属性？我尝试这样做 Start: End: You
c# - 从父 C# 调用子方法
我的父类是: public Class Parent { protected void foo() { bar(); } protected void
c# - 从父 SharePoint 列表重新继承权限
所以我知道如何中断列表的继承 (SPList.BreakRoleInheritance(true))，但是如何以编程方式从其父级重新继承？谢谢最佳答案 MSDN link . SPList.Res
java - 从父 pom 的插件执行中删除一个目标
最近我们将maven版本更改为3.5.4根据https://issues.apache.org/jira/browse/MNG-5940 Maven Super POM 中的 maven-source
jquery - 从父 div 中排除选择器
我需要在单击页面背景(#page)时触发一个事件(例如隐藏 float 购物车)，但在单击内部内容时不会发生此事件。所以我需要这个事件发生在空间:页面减去内容。我该如何实现它？谢谢如果我有这个结构:
javascript - 从父 ajax 调用问题引用的数据
我在另一个 ajax 函数中有一个 ajax 函数 $.ajax({ url: '../...', type: 'POST',
Java多态性 - 从父 map 获取子命令
我创建了两个类 - Building 和 Warehouse。 Warehouse 扩展 Building。我创建了 Building map (building_map)，其中放置了 Buildin
android - 从父 Activity 传递结构
我有一个获取和处理数据的 Activity ，我想启动一个新 Activity ，该 Activity 能够从父 Activity 访问一些变量(复杂数据结构)。我不能在这里使用序列化，有没有一种简
javascript - 从父 HTML 调用函数
在 HTML 中，我有两个函数，一个是仅带有警报的 abc，另一个是使用 window.open() 创建一个新窗口，并填充预定义的 HTML 字符串。我想从父 HTML 调用该函数。我尝试过调用pa
jquery - 从父 div 中删除克隆按钮并更新代码
我一直在研究这个脚本并且一切正常，除了 $(this).parents(".clonedInput").clone()。按钮克隆引用放置在 .clonedInput div 中。如果能帮助我从 cl
javascript - 从父 iframe 检测动画完成
我有以下代码: 主要 HTML 文档 $(function(){ $("#i").load(function(){ var $iframeConten
Python BeautifulSoup 从父/兄弟关系中获取内容
html 的一部分结构如下。我想从中获得工作“标题”和“时间”。我可以单独获取它们，例如: from bs4 import BeautifulSoup pages = ' \
html - 从父 div 中删除底部边框
我正在尝试从父 div 中删除底部边框。我已经编写了以下 HTML 代码，但我认为我的方法不正确。看到这张图片这是我的 HTML 代码 j
java - 从父 fragment 调用方法
通常，我可以从 Activity 调用扩展 DialogFragment 并实现 DialogInterface.OnClickListener() 的对象。然后，如果我想从那个 Dialog 调用
javascript - 从父 Controller 更新服务值
我花了好几个小时搜索如何从嵌套 Controller 更新服务值。我的子 Controller 需要更新服务中的值。该值需要显示在父 Controller 中。我做了一个jsfiddle，让它更清
javascript - 从父 React 刷新子状态
我有一个包含一些数据的表格，表格中的每个元素都是一个 React 类组件。它看起来像这样: 我想要的只是有一个用于“选中所有”功能的复选框(左上角的复选框)。问题是我不知道如何解决这个问题，因为 pr

首页

博学

6Ren·AI

商城

javascript - 将数据从父指令传递到子指令