加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

AngularJS将指令模板中的参数传递给控制器

发布时间:2020-12-17 07:12:01 所属栏目:安全 来源:网络整理
导读:在我的应用程序中,我有这样的指令: .directive('nodeList',function($compile) { return { restrict: 'E',terminal: true,scope: { nodes: '=ngModel',deleteArticle: '',editArticle: '' },link: function ($scope,$element,$attrs) { if (angular.isArray
在我的应用程序中,我有这样的指令:

.directive('nodeList',function($compile) {
    return {
        restrict: 'E',terminal: true,scope: {
            nodes: '=ngModel',deleteArticle: '&',editArticle: '&'
        },link: function ($scope,$element,$attrs) {
            if (angular.isArray($scope.nodes)) {
                $element.append('<accordion close-others="true"><node ng-repeat="item in nodes" ng-model="item" delete-article="deleteArticle(node_item)" edit-article="editArticle(node_item)"></node></accordion>');
            } 
            $compile($element.contents())($scope.$new());
        }
    };
})

.directive('node',scope: {
            node: '=ngModel',$attrs) {
            if (angular.isArray($scope.node.Options) && $scope.node.Options.length > 0) {
                $element.append('<accordion-group><accordion-heading>{{node.Title}}   <a href="javascript:void(0)" ng-click="editArticle({node_item: node})" data-toggle="modal" data-target="#new-article" class="action"><i class="glyphicon glyphicon-edit"></i></a></accordion-heading><node-list ng-model="node.Options"></node-list>{{node.Content}}</accordion-group>');
            } else {
                $element.append('<accordion-group><accordion-heading>{{node.Title}}   <a href="javascript:void(0)" ng-click="editArticle({node_item: node})" data-toggle="modal" data-target="#new-article" class="action"><i class="glyphicon glyphicon-edit"></i></a></accordion-heading>{{node.Content}}</accordion-group>');
            }
            $compile($element.contents())($scope.$new());
        }
    };
})

和这样的HTML:

<node-list ng-model="articles" delete-article="deleteArticle(node_item)" edit-article="editArticle(node_item)"></node-list>

在控制器中:

$scope.editArticle = function(vArticle) {}

当我只有一个指令 – 一切都很清楚,但是当我的指令调用另一个指令时如何传递参数?这是真的吗?如何?

解决方法

您只需要更改一小段代码,以便函数调用正确接收参数

在你的nodeList指令中,调用你的节点,如下所示:

<node ng-repeat="item in nodes" ng-model="item" delete-article="deleteArticle({node_item: node_item})" edit-article="editArticle({node_item: node_item})"></node>

并在您的node指令中,调用您的nodeList,如下所示:

<node-list ng-model="node.Options" delete-article="deleteArticle({node_item: node_item})" edit-article="editArticle({node_item: node_item})"></node-list>

所以引用“node_item”正在孩子的孩子的孩子之间正确传递到最顶级的父母(你的控制器:)

看看这个:Plunker

原因:

你的< node-list>有自己的范围,你需要将“node_item”传递给父范围(你的控制器),简单!棘手的部分是在孙子范围内调用该函数(< node>),因此您再次需要将“node_item”从孙子传递给子节点.

调用compile时也不需要创建新的作用域.您在那里的$scope对象还有一个来自父作用域的新作用域.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读