javascript - 获取指令函数属性的参数并在另一个 Controller AngularJS中更改它

Question

我有一棵树directive我希望当用户单击时会发生一些事情......它应该由想要使用这棵树的人来实现。例如节点的文本更改。

index.html

<div ng-controller='TestController'>
        <tree model="treedata" on-node-clicked="changeNodeText($node)"></tree>
</div>

指令

function treeDirectiveFactory() {
            return {
                restrict: 'E',
                scope: {
                    model: '=model',
                    collapseIcon: '=',//IIconProvider//TODO:
                    expandIcon: '=',//IIconProvider//TODO:
                    onNodeClicked:'&',//param:$node//TODO:
                    isExpanded:'@'
                },        
                templateUrl: '/_Core/DirectiveCore/Tree/TreeTemplate.html',
                controller: 'TreeController',
                controllerAs: 'c'

            }
};

模板的一部分

<a href={{node.link()}} class="node-link" ng-click="c.onNodeClicked(node)"
   ng-class="{'margin-no-child':node['__$extension'].isLeaf(node)}">
    <span ng-bind-html="node.iconProvider().htmlPath()"></span>
    {{node.text()}}
</a>

当用户单击节点时，ng-click="c.onNodeClicked(node)" 将调用，并将单击的节点传递给 onNodeClicked 函数。下面是controller as c中该函数的实现树directive

onNodeClicked(node: Core.INode) {//TODO:

        if (this.scope["onNodeClicked"]) {
            this.scope["onNodeClicked"] = ({$node:node});
        }
    }

我想告诉函数您有一个名为 $node 的参数，并设置 $node 的值。然后我想更改 index.html 中外部 Controller TestController 中的 $node 文本...这是 changeNodeText TestContoller 中的strong> 函数

f($node: Core.TestNode) {
        if($node !== undefined)
            $node.t = "Clicked!";
    } 

但没有任何变化，实际上 changeNodeText 函数从未被调用。我知道有什么问题，但不幸的是我无法弄清楚。任何帮助，将不胜感激。

Answer 1

回答@Parud0kht

不是设置函数，而是调用它。

onNodeClicked(node: Core.INode) {//TODO:

        if (this.scope["onNodeClicked"]) {
            //Do THIS
            this.scope["onNodeClicked"]({$node:node});
            //Not THIS
            //this.scope["onNodeClicked"] = ({$node:node});
        }
    }

<小时/>

其他读者的回答

此示例使用组件来实现，但相同的原则也适用于指令。

angular.module('app.dashboard')
    .component('dashboardComponent', {
        templateUrl: 'app/dashboard/directives/dashboard-container.html',
        controller: DashboardComponent,
        controllerAs: 'DashboardCtrl',
        bindings: {
            onTileChange: "&"
        }
    })t

将事件数据从组件传送到父 Controller :

实例化dashboard-component与:

<dashboard-component on-tile-change="HomeCtrl.onTileChange($tile)">
</dashboard-component>

在组件 Controller 中使用局部变量调用函数:

this.onTileChange({$tile: tile});

注入(inject)本地变量的惯例是用 $ 来命名它们。前缀以将它们与父作用域上的变量区分开来。

来自文档:

• & or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given <my-component my-attr="count = count + value"> and the isolate scope definition scope: { localFn:'&myAttr' }, the isolate scope property localFn will point to a function wrapper for the count = count + value expression. Often it's desirable to pass data from the isolated scope via an expression to the parent scope. This can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment($amount) then we can specify the amount value by calling the localFn as localFn({$amount: 22}).

--AngularJS Comprehensive Directive API Reference