Question

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

自定义指令模板文件metrics-dashboard-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>

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

$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变量中。

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

2 个答案: