ディレクティブ関数属性の引数を取得し、別のコントローラーangularjsで変更します

debugcn 投稿 Dev

パリドクト

私はツリーを持っていて、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の外部コントローラーTestControllerの$ nodeテキストを変更したい...これはTestContollerのchangeNodeText関数です

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

しかし、何も変更されません。実際には、changeNodeText関数は呼び出されません。私は何かが間違っていることを知っていますが、残念ながら私はそれを理解することができません。どんな助けでもいただければ幸いです。

georgeawg

@ 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

コンポーネントから親コントローラーにイベントデータを通信するには：

でインスタンス化dashboard-componentします：

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

コンポーネントコントローラーで、ローカルを使用して関数を呼び出します。

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

注入されたローカルの規則は$、親スコープの変数と区別するためにプレフィックスを付けて名前を付けることです。

ドキュメントから：

&または&attr-親スコープのコンテキストで式を実行する方法を提供します。属性名が指定されていない場合、属性名はローカル名と同じであると見なされます。考える<my-component my-attr="count = count + value">と分離株スコープ定義scope: { localFn:'&myAttr' }、分離株スコーププロパティは、localFn機能のラッパーを指しますcount = count + value表現。多くの場合、分離されたスコープから式を介して親スコープにデータを渡すことが望ましいです。これは、ローカル変数の名前と値のマップを式ラッパーfnに渡すことで実行できます。たとえば、式がincrement($amount)thenの場合、をlocalFnとして呼び出すことで金額の値を指定できますlocalFn({$amount: 22})。

- AngularJS総合指令APIリファレンス

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-07-7

コメントを追加

サインイン

分類Dev

Related 関連記事

記事