Angular UI Grid 3.x 버전의 Action 버튼
Angular UI Grid(불안정 버전)를 사용하여 간단한 테이블을 렌더링하려고 합니다.각 행에 대해 버튼을 클릭하면 부모 컨트롤러에서 처리해야 합니다.
자바스크립트:-
angular.module("app", ['ui.grid', 'ui.grid.edit', 'ui.grid.selection', 'ui.grid.pagination', 'ui.grid.expandable', 'ui.grid.paging']).controller("appController", function($scope) {
console.log("Controller is up.");
$scope.data = [];
for (var i = 0; i < 50; i++) {
$scope.data.push({
fullName: "Name" + i,
age: i
});
}
$scope.clickHandler = function(){
// this never gets invoked ?!
console.log("Row Action click Handler.");
};
$scope.gridOptions = {
data: $scope.data,
columnDefs:[ {name:'fullName',field:'fullName'},
{name:'age',field:'age'},
{name:' ',cellTemplate:'<div><button ng-click="clickHandler()">Click Here</button></div>'}
]
};
});
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.min.css">
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<script src="script.js"></script>
</head>
<body data-ng-app="app">
<h1>Angular UI Grid unstable</h1>
<div data-ng-controller="appController">
<div class="grid" ui-grid="gridOptions">
Test
</div>
</div>
</body>
</html>
코드에서와 같이 작업 버튼을 렌더링하기 위해 세 번째 열에 인라인 템플릿이 있는 columnDefs를 사용했습니다.
문제
버튼을 클릭해도 작동하지 않습니다.클릭 시 '$scope.clickHandler' 기능이 실행될 것으로 예상합니다.또한 클릭 핸들러에게 '이름'을 인수로 전달할 수 있어야 합니다.
@mainuy 보다 쉬운 것은 다음과 같습니다.
추가하기grid.appScope.당신의 $scope 회원 앞에서.
예를 들어, 당신의 경우에는$scope.clickHandler:
cellTemplate:'<button ng-click="grid.appScope.clickHandler()">Click Here</button>'
더 뉴에서ui-grid만사가 뜻대로 되다isolated범위를 넓혔죠 그래서 그들은 그들이 처리할 수 있는 기능을 추가했습니다external구경거리
다음은 다음과 같습니다.
html 정의에서 그리드는 다음과 같습니다.
<div class="grid" external-scopes="clickHandler" ui-grid="gridOptions">
또한 외부 스코프 개체(호출 가능 기능 포함)를 컨트롤러에 추가합니다.
$scope.clickHandler = {
onClick : function(value){
alert('Name: '+value);
}
};
마지막으로 셀 템플릿을 다음과 같이 정의합니다.
{
name:'Action',
cellTemplate: '<div><button ng-click="getExternalScopes().onClick(row.entity.fullName)">Click Here</button></div>'
}
여기 당신의 포크 플렁커가 있습니다.
@gdoron의 대답과 비슷하지만,controllerAs통사론컨트롤러에서 다음과 같이 설정해야 합니다.appScopeProvider가리킬 옵션this개체:
this.gridOptions = {
...,
appScopeProvider: this
};
그리고나서,cellTemplate:'<button ng-click="grid.appScope.clickHandler()">Click Here</button>'
참고: 기본적으로 ui-grid 요소의 상위 범위는 grid.appScope 속성을 사용하면 grid.appScope에 원하는 참조를 할당할 수 있습니다.
앱 컨트롤러를 직접 할당하는 대신 라우팅 구성을 사용하는 경우 getExternalScopes() 메서드가 노트 하나로 예상대로 작동합니다.
해당 컨트롤러에서 아래 문장 $scope.gridScope = $scope;
언급URL : https://stackoverflow.com/questions/27621321/action-button-in-angular-ui-grid-3-x-version
'programing' 카테고리의 다른 글
| npm 설치 오류 - 로컬 발급자 인증서를 가져올 수 없습니다. (0) | 2023.10.06 |
|---|---|
| C/C++의 통사당 (0) | 2023.10.06 |
| Cython을 Python to C Converter로 사용 (0) | 2023.10.06 |
| 도커 컨테이너에서 호스트 데이터베이스 액세스 (0) | 2023.10.06 |
| 함수 포인터가 명령 파이프라인을 삭제하도록 강제합니까? (0) | 2023.10.06 |