2014-06-11 2 views
3

앱을 제작 중입니다. 것을Angularjs ng-class가 호출하지 않는 스코프 메소드

var mycontrollers = angular.module('mycontrollers',['dataservice']); 

mycontrollers.controller('mainController', function ($scope) { 

    $scope.getCellColor = function (value) { 
     if(value===20){ 
      return 'sucess'; 
     }   
     else { 
      return 'error'; 
     } 
    }; 
}); 

mycontroller.controller('unitTableController', function($scope,unitdata) { 
    $scope.something = {data: unitdata.getData()}; 
}); 

참고

var myApp = angular.module('myApp',['ngRoute','mycontrollers']); 

myApp.directive('countTable', function(){ 
    return { 
    restrict: 'E', 
    scope: {tableType:'=tableType'}, 
    templateUrl: '../html/table.html' 
    }; 
}); 

내 컨트롤러 JS처럼 보인다 :

<html ng-app='myApp'> 
<body ng-controller='mainController'> 
    <div ng-view> 
    </div> 
</body> 
</html> 

내 주요 모듈 JS 모습 : 같이 내 index.html을 보인다 mainController은 상위 컨트롤러입니다. unitTableController은 mainController에서 상속됩니다.

카운트 테이블 템플릿은 unitTableController에 의해로드됩니다.

<table> 
    <tr ng-repeat="row in tableType.data.rows"> 
     <td ng-repeat="col in row track by $index" ng-class="getCellColor(col)">{{col}}</td> 
    </tr> 
</table> 

지시어를 들고 HTML은 다음과 같습니다 : 같은

table.html 보인다

<div> 
    <count-table table-type='something'></count-table> 
</div> 

이제 지시어가에 예상되는 형태로 올바른 데이터를 인쇄 , 부모의 getCellColor() 메소드 mainController이 호출되지 않습니다.

unitData는 서비스 데이터가 나머지 데이터를 가져 오지만 여기에는 문제가되지 않습니다.

셀의 값 조건을 기반으로 테이블 셀의 클래스를 설정해야합니다. 기존 표/그리드 도구를 사용하고 싶지는 않지만 도구를 사용하기에 매우 간단한 표입니다. 내가 잘못하고있는 것이 있거나 그 값에 따라 셀 클래스를 얻는 더 좋은 방법이 있습니까?

아마도 메서드 호출의 범위가 잘못되었습니다.

좋습니다. 대신 getCellColor의

+0

'ng-class = "getCellColor (col)"'그냥 시도해 주시겠습니까? –

+0

thnx David ..하지만 여전히 컨트롤러에서 호출되지 않습니다. – Panshul

답변

2

이 같은 지침에 getCellColor 방법을 전달합니다

<count-table table-type='tableType' 
get-cell-color='getCellColor(col)'> 
</count-table> 

을이 지침은 다음과 같습니다

app.directive('countTable', function(){ 
    return { 
    restrict: 'E', 
    scope: { 
     tableType:'=tableType', 
     getCellColor: '&' 
    }, 
    templateUrl: 'table.html' 
    }; 
}); 

이 지침 템플릿은 다음과 같습니다

<table> 
    <tr ng-repeat="row in tableType.data.rows"> 
     <td ng-repeat="col in row track by $index" ng-class="getCellColor({col: col})">{{col}}</td> 
    </tr> 
</table> 

Plunker

+0

멋지다 thnx Jerrad that awesome ..! – Panshul

0

사용 getCellColor (COL)는 ({{COL}})

NG 수준의 사용 $ 범위. $의 평가는() 식을 평가합니다. 괄호 쌍을 사용할 필요가 없습니다.

업데이트 : getCellColor (col) 메소드를 사용하여 클래스를 변경할 수 있지만. 그것은 한 번 평가 될 수 있습니다. 각 열에 속성을 설정하는 것이 좋습니다.

+0

그 점을 지적 해 주셔서 감사합니다. 그러나 ng-class 메서드는 여전히 호출되지 않습니다. – Panshul