カスタム角度指示の値を他のページに渡す

Question

オブジェクトに値が格納されているカスタム指示があります。この指示を参照しているページにカスタム指示入力とドロップダウンの値をオブジェクトとして渡したい。私のメインページにある適用ボタンをクリックすると、このディレクティブの値がメインページに渡されます。このディレクティブを使用する私のページのカスタムディレクティブから値を取得できません。ディレクティブの値を別のページに渡すにはどうすればいいですか？私は私が最後

カスタムディレクティブテンプレートファイルメトリクス・ダッシュボード・configuration.html

<div> 
    <span>Service Level (SL)</span> 
    <select ng-model="selection.serviceLevelOption" ng-options="serviceLevelObject.value as serviceLevelObject.text for serviceLevelObject in selection.serviceLevels.values" ng-init="selection.serviceLevelOption='30'"></select> 
    <br> 
    <input type="text" ng-model="selection.inputText" /> 
</div> 

で定義された私のメインページコントローラ内の関数内で宣言されてきたリクエスト変数でクエリオブジェクトから値を必要とします

カスタムディレクティブ宣言およびコントローラ

function metricsDashboardConfiguration() { 
    return { 
    restrict: 'E', 
    scope: { 
     query: '=' 
    }, 
    templateUrl: 'metrics-dashboard-configuration.html', 
    controller: metricsDashboardConfigurationCtrl 
    }; 
} 

function metricsDashboardConfigurationCtrl($scope) { 
$scope.query = {};  
$scope.selection = { 
    serviceLevels: { 
      values: [ 
       {value : "15" , text : "15"}, 
       {value : "30" , text : "30"}, 
       {value : "45" , text : "45"}, 
       {value : "60" , text : "60"}, 
       {value : "120" , text : "120"} 
      ] 
     },   
    inputText: "test" 
}; 

$scope.updateRequest = function() { 
    $scope.query.inputText = $scope.selection.inputText; 
    $scope.query.serviceLevels= $scope.selection.serviceLevels; 
}; 

$scope.$watch('selection.inputText', $scope.updateRequest, true); 
$scope.$watch('selection.serviceLevels', $scope.updateRequest, true); 

私はディレクティブを使用しているHTMLページ

<metrics-dashboard-configuration query="queryData" update-Queues-Dashboard="updateQueuesDashboard()"></metrics-dashboard-configuration> 

私はあなたがあなたのmetrics-dashboard-configuration.htmlファイルで使用しているモデルはng-model="selection.serviceLevelOption"とng-model="selection.myInput"ですが、あなたの指示であなたがカスタムディレクティブの値

$scope.queryData = { 
    inputText : "", 
    trailingWindows: [] 
}; 
$scope.updateQueuesDashboard = function() {  
    var request = angular.copy($scope.queryData); 
}; 

Answer 1

を必要とするページのコントローラ見るselection.inputTextとselection.trailingWindows

この作業を確認してくださいPlunkとあなたのコードで何がうまくいかないかを確認してください。

Answer 2

ディレクティブのUI要素にバインドされたモデルを使用しているビューで使用する場合は、隔離スコープでqueryを渡したのと同じ方法で、分離スコープでプロパティを作成する必要があります。

このような何か：

function metricsDashboardConfiguration() { 
    return { 
    restrict: 'E', 
    scope: { 
     query: '=', 
     serviceLevelOption: '=', 
     inputText: '=' 
    }, 
    templateUrl: 'metrics-dashboard-configuration.html', 
    controller: metricsDashboardConfigurationCtrl 
    }; 
} 

史上値は、それがoptionとinText変数に反映されますUIまたはディレクティブコントローラから更新されているものを、次にHTML

<metrics-dashboard-configuration service-level-option="option" input-text="inText" query="queryData" update-Queues-Dashboard="updateQueuesDashboard()"></metrics-dashboard-configuration> 

と。