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

我有一个自定义指令，它具有存储在对象中的值我希望自定义指令输入和下拉的这些值作为对象传递到我指向此指令的页面。这个指令值将被传递到主页面，当我点击应用按钮，这是我的主页上，我试过以下，但无法从我的页面中的自定义指令中使用此指令的值。请建议我如何将指令中的值传递给不同的页面。我需要从请求变量查询对象我在最后将自定义角度指令的值传递到其他页面

自定义指令模板文件指标，仪表板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文件中使用，我需要自定义指令

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

来源

2017-04-12 zubairm

该模型的数值页的控制器ng-model="selection.serviceLevelOption"和ng-model="selection.myInput"，但在你的指令，你是看着selection.inputText和selection.trailingWindows

检查此工作Plunk和验证你的代码出了什么问题。

来源

2017-04-12 04:47:32

更正，这是一个错别字 – zubairm

检查你的观察者$范围。$ watch（'selection.inputText'，$ scope.updateRequest，true）; $ scope。$ watch（'selection.trailingWindows'，$ scope.updateRequest，true）;' –

谢谢现在完成 – zubairm

如果您想在使用该指令的视图中使用绑定到该指令的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变量来反映。

来源

2017-04-12 05:25:35

我出于同样的原因创建了一个查询变量，它具有所有的数据，但我的问题是无法从我的页面中的这个查询对象获取值，我使用此指令 – zubairm

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

回答

相关问题