将值从自定义角度指令传递到其他页面

Question

我有一个自定义指令，其值存储在一个对象中 我希望这些来自自定义指令输入和下拉列表的值作为对象传递到我引用此指令的页面。 当我单击主页上的"应用"按钮时，此指令值将传递到主页， 我已经尝试了以下操作，但无法从使用此指令的页面中的自定义指令中获取值。请建议如何将值从指令传递到不同的页面。我需要请求变量中查询对象的值，我在主页控制器的函数中声明了

最后一个自定义指令模板文件指标仪表板配置.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>

我需要自定义指令值的页面的控制器

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

Answer 1

您在metrics-dashboard-configuration.html文件中使用的模型是ng-model="selection.serviceLevelOption"和ng-model="selection.myInput"，但是在您的指令中，您正在观察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
};
}

.HTML

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

然后，无论从 UI 或指令控制器更新什么值，它都会反映在option和inText变量中。