Angularjs : 부분 또는 로컬 범위 메서드에 액세스하는 방법은 무엇입니까?

지시문을 통해 가로 사진 스크롤러를 처리하려고합니다. 링크에서 두 개의 화살표를 처리하여 이전 / 다음 기능을 만들기 위해 컨테이너를 측정하고 싶습니다. 이 코드는 다음과 같습니다.

app.directive("photos", function () {
    return {
        restrict: "E",
        replace: true,
        scope: {
            "photoid": "@",
            "scrollable": "@",
            "size": "@",
            "height": "@",
            "list": "=",
            "prefix":"@",
            "inline": "@",
            "extension": "@",
            "class": "@",
            "slide": "@"
        },
        template: 
        '<div style="position:relative">\n\
            <div id="photos{{photoid}}" class="scroller {{class}}" ng-class="[{{scrollable}}]" ng-style="{display:list.length==1?\'inline-block\':\'block\', width: list.length==1?\'{{size||\'171px\'}}\':\'auto\', height: \'{{height||size||\'171px\'}}\'}">\n\
                <div ng-repeat="p in list"\n\
                    ng-style="{\'background-image\': \'url({{prefix}}{{p.file}}.thumb.{{extension||\'jpg\'}})\', width: \'{{size||\'171px\'}}\', height: \'{{height||size||\'171px\'}}\'}"\n\
                    ng-click="$parent.$parent.openPopoverImageViewer(\'#photos{{photoid}}\', {{$index}})">\n\
                    <div>{{p.text||p.description}}</div>\n\
                </div>\n\
            </div>\n\
            <div class="prev" ng-if="list.length>1" nng-hide="slide<=0"             ng-click="scope.prev()"></div>\n\
            <div class="next" ng-if="list.length>1" nng-hide="slide>=list.length-1" ng-click="scope.next()"></div>\n\
        </div>',
        link: function (scope, el, attrs) {
            //scope.list = JSON.parse(attrs.list);
            //.animate({scrollLeft: x}, 200);
            scope.slide = scope.slide||0;

            console.log("scope.photos: entering for id = #photos"+scope.photoid);

            var scroller = $("#photos"+scope.photoid);
            var container = scroller.parent();

            console.log("scope.photos: scroller = "+scroller);
            console.log("scope.photos: container = "+container);

            var w = container.width ();
            var h = container.height(); if (h>768) h = 768; // do not exceed image maximum retina size
            console.log("scope.photos: container (w,h)=("+w+", "+h+")");
            scope.scroller  = scroller;
            scope.container = {width: w, height: h};
            scope.image     = {width: h};
            //scope.slides  = c.length;
            //scope.slide   = index;
            console.log("scope.photos: after sizing container is "+JSON.stringify(scope.container));

            // make it scrollable or not
            if (scope.list.length*h > w) {
                scroller.addClass("hScrollable");
                console.log("scope.photos: Scroller for "+scope.list.length+" added hScrollable class");
            }
            else {
                scroller.removeClass("hScrollable");
                console.log("scope.photos: Scroller for "+scope.list.length+" removed hScrollable class");
            }
            //console.log("scope.photos: Scroller for "+c.length+" photos (container w="+w+"px, image width="+h+") start scroll at index "+index+", scrolleft= "+x+" and got: "+$(scroller).scrollLeft());


            var sw = container.width();
                 w = scroller.height();     
            var x = scope.slide*w;                      // offset at the left border
            x -= (sw-w)/2;                          // center
            if (x<0)    x = 0;                      // make sure it's not underleft

            scroller.scrollLeft(x);
            //console.log("scope.photos: Scroller for "+c.length+" photos ("+w+"px width) start scroll at index "+index+", scrolleft= "+x+" and got: "+$(scroller).scrollLeft());
        },
        prev : function() {
            console.log("scope.photos: prev()");
            scope.scroller.scrollLeft(0);
        },  
        next : function() {
            console.log("scope.photos: next()");
            scope.scroller.scrollRight(0);
        }   
    };
});

불행히도 다음과 같이 콘솔에 표시된 것처럼 null이 표시되므로 컨테이너의 너비와 높이에 액세스 할 수없는 것 같습니다.

[Log] scope.photos: entering for id = #photosImpacReglage (kws.corn.app.js.html, line 196)
[Log] scope.photos: scroller = [object Object] (kws.corn.app.js.html, line 201)
[Log] scope.photos: container = [object Object] (kws.corn.app.js.html, line 202)
[Log] scope.photos: container (w,h)=(null, null) (kws.corn.app.js.html, line 206)
[Log] scope.photos: after sizing container is {"width":null,"height":null} (kws.corn.app.js.html, line 212)
[Log] scope.photos: Scroller for 5 removed hScrollable class (kws.corn.app.js.html, line 221)

또한 로컬 범위 prev () 및 next () 메서드를 어떻게 트리거 할 수 있습니까? 메서드의 console.log ()에도 불구하고 클릭하면 콘솔 메시지가 없습니다.

[업데이트 1] @ClintPowell 덕분에 지시문을 수정했고 replace : true를 제외하고 작동합니다. 댓글을 달면 앱이 중단됩니다. 이해가 안 돼요.

jsFiddle이 바로 거기에 있습니다. 여기에 링크 설명을 입력하세요.