Question

我无法找到一种方法，当我拥有带控制器和其他依赖项的angularJS表单时，如何在外部使用javascript中创建外部脚本。

我制作了一个局部angularJS表单，它使用了角度素材设计Dialog服务，我需要创建一个外部脚本，它将打开相同的对话框，就像在本地显示一样。可能，我不希望外部Web应用程序包含angularJS和我的整个应用程序，我只需要打开我的表单的Material Design对话框并将信息发送到我的控制器。它甚至可能吗？

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

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

Answer 1

我希望我理解正确。

它的作用是，当你点击链接时，它会插入角度脚本标记，等待它加载，插入一些角色的div（这些将是你的模态），最后引导角度app。

这主要是香草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

我的模板的外部脚本

1 个答案: