액세스하는 방법을 선택한 옵션에서 컨트롤러서 버튼을 클릭에련?
-
20-12-2019 - |
문제
나는 선택 분야로 ng-model
에서 속성 탭에서 ui-부트스트랩의 tabset.도합니다.에 버튼을 클릭하고 싶을 얻을 선택한 값 모델입니다.용
<select ... ng-model="selectedOption"></select>
<button ng-click="buttonClick()">Click</button>
다음 컨트롤러
$scope.buttonClick = function() {
//try to access $scope.selectedOption
}
그러나지 않는 것을 포함하는 값입니다.했으로 보고 $scope
변수와 그것을 포함 selectedOption
내부라는 것 $$childTail
은 거기에 다른 어떤 방법에 액세스하 selectedOption 값 또는 나의 구조를 변경 내?
나 Plunker 기 의 것 나가고자 노력하고 있습니다.
해결책
모두 Mathew 버그의하고 꿀벌이 사람의 답 작동하지만 그들이 설명하지 않습니다 무엇이 일어나고 있습니다.
좋은 기본적으로 내려가는 다음과 같다:
이 tabset 지시어를 사용하고 있는지 transclusion
그래서 selectedOption 에서 실제로 내부 범위(tabset 의 범위),지에 TabsDemoCtrl 의 대처하기 위해합니다. 이 답변 설명 transclusion 않고,어떻게 액세스할 수 있습 transcluded 모델입니다.
Transclusion 게 얕은 귀하의 사본 모델의 경우에도 그래서 당신은 init 같은 선택된 옵션 $scope.selectedOption = "5";
에서 당신의 TabsDemoCtrl,당신의 선택 표시됩 5 로 선택한 시작에서만 변경사항이 반영되지 않습니다 당신의 TabsDemoCtrl 컨트롤러의 범위에 있기 때문에 tabset 아동의 범위 5 은 복사하고,하나 업데이트되고 있는 tabset 의하지 않는 범위의 범위가 있습니다.
또한 사용할 수 있는 객체에 대한 선택의 모델입니다.이후 transclusion 성분 복사본,개/배열/기능은 복사한 참조를 통해 변수 값으로 복사됩니다.이것은 또한 이유에 액세스할 수 있습 TabsDemoCtrl 의 버튼을 클릭에서 내부 범위가 있습니다.
업데이트 plnkr 으로 또 다른 대안 솔루션(객체 버전):
만든 객체에서 컨트롤러
$scope.selection = {};
과에서 사용되는 모델은 다음과 같이
ng-model="selection.option"
다른 팁
모 ui 탭/tabset 지시어들로 새로운 범위,그래서 접근하기 위해서 부모 범위(당신이 무엇을 하려고)를 첨부$모
<select name="selectedCampaign" ng-model="$parent.selectedOption" ng-options="option for option in options"></select>
업데이트 plunkr: http://plnkr.co/edit/BgMMn4tJRWm72ZXeQG3N
편집:죄송,나는 오해 질문할 수 없는 당신은 단지 이?
<select ... ng-model="selectedOption"></select>
<button ng-click="buttonClick(selectedOption)">Click</button>
$scope.buttonClick = function(selectedOption) {
selectedOption.whatever...
}