>source

동적으로 구동되는 컨트롤러가있는 AngularJS로 로컬 웹 페이지를 실행하려고합니다. 내 페이지를 구동하기 위해 데이터가로드 된 특정 자바 스크립트 파일을 구동하는 URL 변수를 원합니다.

HTML 파일

<html>
    <head >
        <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
        <script>
            var app = angular.module("myApp", []);
        </script>
        <script>
            var url = new URL(window.location.href);
            var t_var= url.searchParams.get("t_var");
            var x = document.createElement('script');
            x.src = t_var +'.js';
            document.getElementsByTagName("head")[0].appendChild(x);
        </script>
    </head>
    <body ng-app='myApp' ng-controller='Ctrl1'>
        {{sub1Variable}}
    </body>
</html>

AngularJS 컨트롤러

app.controller("Ctrl1", function($scope) {
    $scope.sub1Variable = 'sub1'
});

HTML 파일에 아래 태그를 포함 시키면이 기능을 사용할 수있었습니다.

<script src="sub1.js"></script>

이 이름의 컨트롤러가 참조되지 않았다는 오류가 계속 발생합니다.


  • 답변 # 1

    원칙적으로 여기서하는 일은 괜찮습니다. 아래를 참조하십시오.

    app.controller("Ctrl1", function($scope) {
        $scope.sub1Variable = 'sub1'
    });
    
    
    <html>
        <head >
            <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
            <script>
                var app = angular.module("myApp", []);
            </script>
        </head>
        <body ng-app='myApp' ng-controller='Ctrl1'>
            {{sub1Variable}}
        </body>
    </html>
    
    

    실행하면 출력에 'sub1'이 표시됩니다.

    따라서 컨트롤러가 등록되지 않았다는 오류가 발생하면 컨트롤러 등록이 포함 된 JavaScript 파일을로드하지 않는 것입니다. app.controller... 를 포함하는 스크립트를 확인하십시오  라인은 <script> 를 통해 포함됩니다  각도를로드하고 모듈을 등록 한 후 어느 시점에서 요소.

    (SO 스 니펫 및 CodePen 등은 편의상 JavaScript를 암시 적으로 포함한다는 것을 기억하십시오. 실제 코드에서는 직접 수행해야합니다.

    실제로 이것이 빠른 로컬 앱인 경우 다음과 같이 모듈 등록과 동일한 스크립트 요소에 포함시킬 수 있습니다.

    <html>
        <head >
            <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
            <script>
                var app = angular.module("myApp", []);
                app.controller("Ctrl1", function($scope) {
                     $scope.sub1Variable = 'sub1'
                });
            </script>
        </head>
        <body ng-app='myApp' ng-controller='Ctrl1'>
            {{sub1Variable}}
        </body>
    </html>
    
    

관련 자료

  • 이전 java - 버튼을 누른 후 자체 ActionListener 클래스를 사용하여 JTextArea에 텍스트를 추가하는 방법
  • 다음 python - 팬더 그룹별로 관찰 = 참/거짓으로 다른 결과