angular.js의 숨겨진 요소 편집 지연

Question

동일한 페이지에 "표시"모드와 "편집"모드가있는 상당히 복잡한 angular.js 응용 프로그램이 있습니다. 대부분의 복잡성은 편집 모드에 있으며 대부분의 사용자는 "편집"모드에 있지 않습니다.

여기에서 예를 볼 수 있습니다 : http://www.chefsteps.com/activities/squeaky-cheese-curds (하지만 편집 모드에 액세스 할 수는 없습니다). 보시다시피 페이지로드가 이상적입니다. 페이지에 걸쳐 여러 곳에서

나는 내가 거기에서 전체 하위 트리를 컴파일 각도 지연을 가질 수있는 방법이 있나요

ng-show="editMode"

에 의해 보호되는 전체 복잡한 중첩 된 섹션이 중 한 EditMode true가 될 때까지 또는 적어도 나머지 페이지가 렌더링 될 때까지?

Answer 1

아마도 ngSwitch과 ngInclude의 조합을 사용할 수 있습니다. 처음 가 edittemplates을 가지고

<section ng-switch on='editMode'> 
    <!-- editing case, leave src 
    <div ng-switch-when='true'> 
    <div ng-include src='edittemplates.sectionFoo'></div> 
    </div> 

    <!-- show case --> 
    <div ng-switch-when='false'> 
    <!-- show some stuff --> 
    </div> 
</section> 

일반적으로 ng-switch 여전히 모든 DOM을 컴파일하지만, 트릭은 여기에있을 것입니다 : 대신 ng-show의, 처리해야 할 부분에 대한

, ng-switch 사용 객체 빈 키로 시작 :

App.controller('Foo', function($scope) { 
    $scope.edittemplates = { 
    sectionFoo: '' 
    }; 
}); 

을 그리고 나중에, 당신이 그 템플릿 값을 입력, 편집 모드로 전환 할 때 :

$scope.edit = function() { 
    $scope.editMode = true; 

    if ($scope.edittemplatesLoaded) return; // Don't set these twice 
    $scope.edittemplates.sectionFoo = 'sectionFoo.html'; 
    $scope.edittemplates.sectionBar = 'sectionBar.html'; 
    // etc. 
    $scope.edittemplatesLoaded = true;   
}; 

src 속성은 처음에는 비어 있기 때문에 처음에는 컴파일 할 것이 없습니다.

나는 이것을 아직 시도하지 않았지만, 아직 그럴 필요는 없지만 작동해야합니다.