オブジェクトのキーを指示に渡す

Question

私はmd-autocompleteのラッパーとしてディレクティブを作成しました。これにより、再利用が容易になりました。親のコントローラでは、私はオブジェクトを持っています。オブジェクトのキーを私のカスタムディレクティブに渡したいが、問題がある。 md-autocompleteなし簡体字コード：

ここでスクリプト

var app = angular.module('myApp',[]) 
.controller('parentController', function(){ 
    var parent = this; 
    parent.things = {item1: {color: "blue"}, item2: {color: "red"}}; 
}) 
.directive('childDirective',function(){ 
    return { 
    scope: {}, 
    bindToController: { 
     items:'&' 
    }, 
    controller: childController, 
    controllerAs: 'child', 
    template: '<pre>{{child.items | JSON}}<pre>' //should be [item1,item1] 
    } 

    function childController(){ 
    //Just a dummy controller for now 
    } 
}) 

HTML

<div ng-app="myApp" ng-controller="parentController as parent"> 
    <my-directive items="Object.keys(parent.things)"> 
    </my-directive> 
</div> 

TLだ; DR：はどのように親コントローラに定義されたオブジェクトのキーを渡しません子供の指示？私の指示は文字列を扱うように設計されているので、オブジェクト自体ではなく、キーだけを渡す必要があります。

Answer 1

ディレクティブを使用してユーザ属性（=）

app.directive('childDirective', function() { 
    return { 
    replace: true, 
    restrict: 'E', 
    scope: { 
     items: '=' 
    }, 
    template: '<pre>{{items | JSON}}<pre>' 
    }; 
}); 

からローカルスコープとディレクティブを使用してみ「そのまま」、属性「商品」のオブジェクトが渡され、スコープ変数として「商品」

<div ng-app="myApp" ng-controller="parentController as parent"> 
    <my-directive items="getKeys(parent.things)"> 
    </my-directive> 
</div> 

ソースとしてObject.keys（obj）を使用すると、無限ループダイジェストが発生します（この関数は常に新しいオブジェクトを返します）。あなたは、この例のように、ローカルの更新可能なオブジェクトに結果を保存する機能が必要になります。

https://jsfiddle.net/FranIg/3ut4h5qm/3/

$scope.getKeys=function(obj){ 
    //initialize result 
    this.result?this.result.length=0:this.result=[]; 
    //fill result 
    var result=this.result; 
    Object.keys(obj).forEach(function(item){ 
    result.push(item); 
    }) 
    return result; 
} 

Answer 2

最終的にはそれが適切な場所に私を導いたので、私は、正しいようイゴールの答え@マーキングしています。しかし、私は最終的な解決策を提供したがっているが、これはコメントのためには大きすぎる。

この質問に対する回答を検索すると、より柔軟性の高い指示を作成し、いくつかの異なるタイプの入力を行うことができました。

実際のキー（と元の質問に対する私の実際の答え）は、itemsパラメータをプロキシゲッター/セッターオブジェクトにバインドすることでした。基本的な設定は次のとおりです。

app.directive('myDirective',function(){ 
    return { 
    ... 
     controller: localControl, 
     bindToController: { 
     items: '<' //note one-way binding 
     } 
    ... 
    } 
    function localControl(){ 
    var child = this; 
    child._items = [], 

    Object.defineProperties(child,{ 
     items: { 
     get: function(){return child._items}, 
     set: function(x){child._items = Object.keys(x)} 
     } 
    }); 
    } 
}); 

HTML

<my-directive items="parent.items"> 
    <!-- where parent.items is {item1:{}, item2:{}...} --> 
</my-directive> 

は最終的に、私は私のディレクティブは、様々なフォーマットを受け入れることができるようにしたかったことを決めた、とデモンストレーションとしてthis plunkを思い付きました。

私のコードを改善するためのコメントや提案をお寄せください。ありがとう！