3

スコープを分離するディレクティブがあります。親属性を渡すことができます (以下の「ts」)。しかし、属性を使用せずに親スコープのデータを分離スコープに渡す方法はありますか?

つまり、ディレクティブの定義で親スコープの値(ts)にアクセスするようにしたいのですが、htmlに書いた属性で送信する必要はありません。（ $parent の使用は嫌われていると読みました。）

理由: 属性の使用は機能しますが、おかしなことのように見えます。コンポーネントを作成しようとしていますが、コンポーネントを機能させるために、ユーザーが属性 (この場合は "ts='ts'") を追加する必要はありません。

フィドル: http://jsfiddle.net/rrosen326/WWYuD/

<div  ng-app="testapp">
    <div ng-controller="Ctrl">
         <h1>Test of Directive</h1>

        <button ng-click="setData_ts()">Get Data</button>
        <chart-dir num='1' ts='ts'></chart-dir>
        <chart-dir num='2' ts='ts'></chart-dir>
    </div>
</div>

var app = angular.module('testapp', [])
    .controller('Ctrl', Ctrl);

function Ctrl($scope) {
    $scope.ts = -1; // timestamp 

    $scope.setData_ts = function () {
        $scope.ts = new Date().getTime();
    };

}

app.directive('chartDir', function () {
    return {
        restrict: 'EA',
        scope: {
            ts: '=',
            num: '@'
        },
        replace: true,
        template: '<div><h3>Chart {{num}}</h3><p>Time Stamp: {{ts}}</p></div>',
        link: function (scope, element, attrs) {

            scope.$watch('ts', function (newValue, oldValue) {
                // Data received - update charts
                console.log("DATA RECEIVED", newValue);
            });


        }
    };
});
4

2 に答える 2

2

$broadcast イベントを使用してコントローラー間で通信することを検討しましたか (各ディレクティブのコントローラーは、メインの Ctrl() コントローラーの子です)

私がどのようにやったかを示すために、あなたのフィドルをフォークしました：http://jsfiddle.net/DotDotDot/YQ2Tq/1/

HTML 側では、コードを少し変更し、「ts」属性を削除し、ng-click で呼び出された関数を変更しました。

<button ng-click="broadcast_ts()">Get Data</button>
    <chart-dir num='1'></chart-dir>
    <chart-dir num='2'></chart-dir>

JS 側では、イベントをブロードキャストし (「hello」と呼びましたが、任意の名前を定義できます)、broadcast_ts 関数を定義し、データを送信します (有用なデータは送信しませんでしたが、たとえば、その中の新しい「ts」値):

$scope.broadcast_ts=function()
   {
       $scope.$broadcast('hello',{"values":'I was broadcasted'})   
   }

次に、ディレクティブで、ブロードキャストされたイベントをキャッチするために $on メソッドを定義しました。

scope.$on('hello', function(event, args){
                scope.ts=new Date().getTime();
                console.log("DATA RECEIVED", args.values);
            })

このメソッドは新しい ts を再計算します (タイムスタンプにわずかな違いがあることをフィドルで確認できます) が、完全に別の値、またはブロードキャストの引数で渡された任意のオブジェクトを使用できます。

于 2013-07-24T14:11:37.143 に答える