LazyLoading angular 지시문

ocLazyLoad이라는 간단한 지시문을 지연로드하는 동안 문제가 있습니다. 코드는 다음과 같습니다 testApp.js의에 beeing와LazyLoading angular 지시문

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script src="https://code.jquery.com/jquery-1.11.2.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.js"></script> 
    <script src="ocLazyLoad.js"></script> 
</head> 
<body> 
    <div id="example" ng-app="LazyLoadTest" ng-controller="TestController"> 
     <say-hello to="world"></say-hello> 
    </div> 
    <script> 
     angular.module("LazyLoadTest", [ "oc.lazyLoad"]) 
      .controller("TestController", function($scope, $ocLazyLoad){ 
       $ocLazyLoad.load({ 
         name: "testApp", 
         files: ["testApp.js"], 
         serie: true 
        }).then(function() { 
         var el = angular.element('#example'); 
         el.append('<say-hello to="world"></say-hello>'); 
        }, function (e) { 
         console.log(e); 
        }) 
     }); 
    </script> 
</body> 
</html>

(function() { 
    'use strict'; 
    angular.module("testApp", []).directive("sayHello", function() { 
     return { 
      scope: { 
       to: '@to' 
      }, 
      restrict: "E", 
      template: '<p>Hello {{to}}</>' 
     }; 
    }); 
})();

게으른 로딩없이 사용할 때 작동하는 지시어는, 아무것도 표시되지 않습니다. 보시다시피 처음부터 DOM에 지시문이 있습니다. 물론 angularJS는 모듈이 아직로드되지 않았기 때문에 지시문을 인식하지 못하며 나중에 각도 추가 함수를 추가합니다. 나는 ocLazyLoad가 새로운 모듈로 응용 프로그램을 부트 스트랩하고 따라서 지시문이 해결 될 것이라고 생각했습니다. 그러나 이것은 사실이 아닌 것처럼 보입니다. 이 예제에서 지시어를 lazy 로딩과 함께 사용하려면 어떻게해야합니까?

나는 또한 내가 문제를 발견 plunker

출처

2014-12-18 Sjoerd222888

을 만들었습니다. 내가 추가하기 전에 요소를 컴파일해야합니다. 약속이 해결 될 때 컴파일 기능이 실행되는 다음 작업 코드를 참조하십시오.

angular.module("LazyLoadTest", [ "oc.lazyLoad"]) 
     .controller("TestController", function($scope, $ocLazyLoad, $compile){ 
      $ocLazyLoad.load({ 
        name: "testApp", 
        files: ["testApp.js"], 
        serie: true 
       }).then(function() { 
        var el, elToAppend; 
        elToAppend = $compile('<say-hello to="world"></say-hello>')($scope); 
        el = angular.element('#example'); 
        el.append(elToAppend); 
       }, function (e) { 
        console.log(e); 
       }) 
    });

출처

2014-12-18 13:27:34 Sjoerd222888

LazyLoading angular 지시문

답변

관련 문제