2017-04-12 66 views
0

我有一個自定義指令,它具有存儲在對象中的值我希望自定義指令輸入和下拉的這些值作爲對象傳遞到我指向此指令的頁面。這個指令值將被傳遞到主頁面,當我點擊應用按鈕,這是我的主頁上,我試過以下,但無法從我的頁面中的自定義指令中使用此指令的值。請建議我如何將指令中的值傳遞給不同的頁面。我需要從請求變量查詢對象我在最後將自定義角度指令的值傳遞到其他頁面

自定義指令模板文件指標,儀表板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); 
}; 

回答

3

該模型的數值頁的控制器ng-model="selection.serviceLevelOption"ng-model="selection.myInput",但在你的指令,你是看着selection.inputTextselection.trailingWindows

檢查此工作Plunk和驗證你的代碼出了什麼問題。

+0

更正,這是一個錯別字 – zubairm

+0

檢查你的觀察者$範圍。$ watch('selection.inputText',$ scope.updateRequest,true); $ scope。$ watch('selection.trailingWindows',$ scope.updateRequest,true);' –

+0

謝謝現在完成 – zubairm

0

如果您想在使用該指令的視圖中使用綁定到該指令的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更新或指令控制器將在optioninText變量來反映。

+0

我出於同樣的原因創建了一個查詢變量,它具有所有的數據,但我的問題是無法從我的頁面中的這個查詢對象獲取值,我使用此指令 – zubairm