調試Angular1選擇下拉菜單

我已經使用過Angular1選擇過，但我正忙着解開正在處理的選擇。調試Angular1選擇下拉菜單

這裏有一個選擇，我試圖建立模板：

<div class="dropdown-selector-container"> 
    <select 
    class="dropdown-select" 
    data-ng-options="option.sectionId as option.label for option in dropdownOptions" 
    data-ng-model="selectedSection" 
    data-ng-change="setDropdownOption()"> 
    </select> 
</div>

控制器這個樣子的對象和方法：

$scope.dropdownOptions = [ 
    { 
    'label': 'ok', 
    'sectionId': '1', 
    }, 
    { 
    'label': 'wow', 
    'sectionId': '2', 
    } 
]; 

$scope.setDropdownOption = function() { 
    console.log($scope); 
};

預期行爲的工作提琴可用here。

麻煩的是，當我複製從小提琴的代碼在路徑內的template和controller在我development instance（其中下拉是與寬度800像素或更少的視口僅可見）時，由印刷$狀態對象控制器功能不包含selectedSection鍵：

有誰知道爲什麼會這樣呢？我會非常感謝您提供的任何建議！

來源

2016-08-05 duhaime

出於調試angularjs，我強烈推薦這個[插件]（https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk ？utm_source = chrome-ntp-icon）用於鍍鉻 –

哦，您已經在使用它了 –

是的，謝謝！我也剛剛發現'angular.element（「。dropdown-selector-container select」）。scope（）'（來自控制檯）讓我直接洞察了我的目標元素的範圍。元素具有'selectedSection'範圍對象，它不會傳播... – duhaime

解決這個問題的關鍵是瞭解到人們可以用類似angular.element(".dropdown-selector-container select").scope()的東西來檢查控制檯中的元素範圍。這導致我的解決方案：

我注意到dropdownOptions對象出現在控制器範圍內，所以我將data-ng-model設置爲dropdownOptions.selected，在更改後我現在可以與此值進行交互。

作出反應，使這種繼承了這麼多漂亮......

來源

2016-08-05 12:45:44 duhaime

調試Angular1選擇下拉菜單

回答

相關問題