뷰포트에 렌더링 된 경우 속성 값에서 각도 ui-grid cellTemplate 함수를 독점적으로 평가하는 방법은 무엇입니까?

Question

저는 angularjs과 ui-grid을 주문 cellTemplate과 함께 사용하고 있습니다. 각 셀의 개체는 COL_FIELD입니다. 이 객체는 src 속성이 cellTemplate 인 image data uri을 반환하는 함수로 전달되어 각 셀이 이미지를 렌더링합니다.

내가 발견 한 것을 나는 다음과 같은 사용자 정의 cellTemplate를 정의 할 때 :

<img src="{{grid.appScope.getCachedImg(COL_FIELD)}}" /> 

은 ... 모든 작동하지만 그리드가되기 위해 느린 때문에 나타나는 모든 셀과 모든 행에 대한 기능 평가 반응 형. 나뿐만 뷰포트 내에서만 세포가 서버 호출을 할 이것은 의미에서 작동 ...

<img src="https://dummyimage.com/30x30/000/fff&text={{COL_FIELD.attributes.displayName[0]}}" /> 

: 테스트 목적으로

나는 다음과 같은 세포 템플릿을 시도했다.

이 차이가 나는 이유는 무엇입니까? 어떻게이 두 번째 동작을 할 수 있지만 반환하는 서버 호출 대신 image data uri 반환하는 함수가 있습니다. 뷰포트 셀만 위 또는 아래로 스크롤하도록 요청 했습니까?

Answer 1

특히 30x30을 사용하는 경우 base64 이미지를 사용하지 않는 이유는 무엇입니까? 이 경우 모든

<img src="{{COL_FIELD.image}}" /> 

에서 HTTP 요청을 호출 할 필요가없고 : 내가 사용하고 무엇을

{ 
    image: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gNzAK/9sAQwAKBwcIBwYKCAgICwoKCw4YEA4NDQ4dFRYRGCMfJSQiHyIhJis3LyYpNCkhIjBBMTQ5Oz4+PiUuRElDPEg3PT47/9sAQwEKCwsODQ4cEBAcOygiKDs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7/8AAEQgAIAAgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A2rvUorSB5pnVFVSfmOM4Ga5WPx219cPBa6c7nHDF8Ko9WOPlHvW3rmmLNDcGRYZIrZPMfz5dsffKyAqfqMc5z06Vy8MNlcxvcxQuLF2PkxzY8y55HLkAHywR8q98DPGBXDClG2p1ym76FxfEN3dzb7aNY7EA/wCkSAlpTn+BcjKjpuPBx+FWktLu7KPvESEj593mSH39vwwKl0y2t2dLm7nAcMCcpkYHYD0+lP1TWdN8iVLK1EbOR5kucMw4PbtyOPx7VtCEE9hS5rGfr2pajrot5NRkS3tmH7uxt/mEeSBud/4n68Dp+NaN/pk10IJLCNBGqBVUHsB2PTHHrXPTxXFuZInO+2VgY2B5X1BH9av23iF9NsppLhribao8kR4G055ZjkEgD0z9RWdOpGeqNJU3TdpItL4e1i4DAhYhgHoT39RwPzq9ZeE7eINPcSmfa7HORsAIAwT90Hr/ABH6VXg1+aaFJJLmCKMgMCUVyfzLEflmnT67aZDyy3F7KORk4UHtgt0A9NvWtbozv2R//9k=" 
} 

Plunker