angularjs 지시문 템플릿을로드 할 때까지 기다림

정말 필요한 때까지 지시문에 대한 각도 js 템플릿을 연기하는 것을 연기하려고합니다. 나는 그것을 전혀 필요로하지 않을지도 모른다. 필요한 경우 지시어에 대한 템플릿 만로드 할 수있는 방법이 있습니까? 이 일을하는 데 서비스가 도움이 될까요? 내 응용 프로그램은 이미 많은 지시문 템플릿을로드하고 필요하지 않으면 너무 많은 내용을로드하지 않도록하고 싶습니다. 정확한 문제는 로그인 양식에 대한 템플릿로드입니다. 사용자가 버튼을 클릭하고 로그인하지 않은 경우 (jQuery를 사용하여) 로그인 양식을 slideOpen 할 수 있습니다.angularjs 지시문 템플릿을로드 할 때까지 기다림

출처

2013-02-15 Edgar Martinez

할 수는 있지만 약간의 작업이 필요합니다. 지시문 템플릿은 대개 * 정말로 * 작지만 로그인 폼이 작지만 아무것도 아닌 것을 상상할 수는 없습니다. 왜 이것을 비동기 적으로로드하려고합니까? –

좋은 방법이 있는지 알고 싶었습니다. 나는 로그인 폼이 작다는 것에 동의하지만 그것이하기 쉬운 일이라면 나는 그것에 갈 것이라고 생각했다. 나는 어려운 일을 부끄러워하지 않는다고 덧붙여 야합니다. 이렇게하는 방법이 있다면, 각도에 대한 일반적인 이해가 추가되기 때문에 알고 싶습니다. –

대다수의 경우 정적 지정 템플릿을 동적으로로드 할 가치가 없습니다. 그것들은 너무 작아서 그렇게하지 못합니다. 하지만 가능합니다. 그러나 대부분의 경우이 전략은 동적 템플릿에 사용됩니다.

템플릿을 가져 오려면 $http이 필요하고 AngularJS에 연결하려면 $compile이 필요합니다.

app.directive('testDirective', function($http,$compile) { 
    return { 
    scope: { show: '&' }, 
    link: function(scope, element, attrs) { 
     var tpl, 
      url = 'testDirective.tpl.html'; 

     scope.$watch('show()', function (show) { 
     if (show) { 
      showTheDirective(); 
     } 
     }); 

     function showTheDirective() { 
     if (!tpl) { 
      $http.get(url).then(function (response) { 
      tpl = $compile(response.data)(scope); 
      element.append(tpl); 
      }); 
     } 
     } 
    } 
    }; 
});

다음은 Plunker입니다.

출처

2013-02-16 18:37:13

ng-if의 지시어를 사용해 보시지 마십시오.

<your-directive ng-if='userLoggedIn'></your-directive>

하고로드 할 지침을 필요로하는 경우에만 범위 변수 userLoggedIn이 참 컨트롤러

app.controller('yourCtrl', function($scope, service){ 
    $scope.dataHasLoaded = false; 

    service.yourUserLoginFuntion(params).then(function (data) { 
     //your login api 
     $scope.userLoggedIn = true 
    }); 
});

에서

출처

2016-11-24 06:59:42

angularjs 지시문 템플릿을로드 할 때까지 기다림

답변

관련 문제