带有我的模板的外部脚本

Question

当我的 angularJS 表单带有控制器和其他依赖项时，我想不出如何在 javascript 中制作外部脚本供外部使用。

我制作了一个本地 angularJS 表单，它使用 angular material 设计对话框服务，我需要制作一个外部脚本，它将打开与本地显示相同的对话框。可能，我不希望外部网络应用程序包含 angularJS 和我的整个应用程序，我只需要用我的表单打开一个 Material 设计对话框并将信息发送到我的控制器。有可能吗？

此外，我发现了一些类似的东西，可能对我有帮助，但我不知道它是否真的对我有帮助，因为我需要将所有依赖项包含到该模板中？

我很想听听您对这项任务的所有想法和建议。

Answer 1

希望我理解正确。

它的作用是，当您单击 link 时，它会插入 angular 脚本标记，等待它加载，为 angular 插入几个 div（这些将是你的模式），最后引导 angular 应用程序。

这主要是普通 JS

script.js

$('#launcher').click(function(){
    var script = document.createElement('script');
    script.src = 'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js';
    script.async = true;
    script.onreadystatechange = script.onload = function() {
        var state = script.readyState;
        if ((!state || /loaded|complete/.test(state))) {
            var body = document.getElementsByTagName('body')[0];
            var divApp = document.createElement('div');
            var divCtrl = document.createElement('div');

            divApp.setAttribute("ng-app", "plunker");
            divCtrl.setAttribute("ng-controller", "MainCtrl");
            divApp.appendChild( divCtrl );
            divCtrl.innerHTML = "{{ name }}"; 

            body.insertBefore(divApp, body.firstChild);

            angular.module('plunker', [])
               .controller('MainCtrl', function($scope){
                 $scope.name = "Hello";
               })
            angular.bootstrap(divApp, ['plunker']);
        }
    };

    var head = document.head || document.getElementsByTagName('head')[0];
    head.insertBefore(script, head.firstChild);

});

index.html

<a href="#" id="launcher"> Launch Modal </a>
<script src="script.js"></script>

plunker

带有我的模板的外部脚本

External script with my template

javascript

external

angularjs