javascript - angularJS在ng-view中加载非 Angular javascript文件

Question

我将 ng-route 和 ng-view 用于我的客户端 Canvas 绘图应用程序。绘图代码位于一个单独的非 Angular js 文件中。我需要放

<div id="container"></div>
<p id="json"></p>

和

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all.js"></script>
<script type="text/javascript" src="/public/canvas/projectTemplate.client.canvas.js"></script>

在目标 ng-view 中。

问题是，我无法在 ng-view html 文件中添加脚本。 (我在浏览器调试窗口中没有看到它)

我尝试将 scripts 放入父 html 文件(其中包含 ng-view)，并保留 #container 和 #json在 ng-view 中(我必须这么做，因为只有这个页面需要这两个元素)，它有一个错误提示 parentNode is not found，因为那时， ng-view (#container and #json) 尚未加载，而 scripts 已加载

编辑:

我在子页面 html 上试过这个:

<p id="p">this is text</p>

<script type="text/javascript">

    (function() {
        var p = document.getElementById('p')
        p.innerText = 'changed by js'

    })()

</script>

但是没用

Answer 1

将脚本引用放在主页 html 本身中，不要从特定的 html 文件中加载它们。仅将 html 放入该页面。并且不要在初始化时从您的 js 中调用 canvas 函数，您将永远找不到 #container 和 #json。

要使它们工作，您需要在指令元素在 View 上呈现时从指令中调用它。

HTML

<render-canvas>
  <div id="container"></div>
  <p id="json"></p>
</render-canvas>

指令

app.directive('renderCanvas', function() {
    return {
        restrict: 'EA', //E = element, A = attribute, C = class, M = comment         
        templateUrl: 'mytemplate.html',
        link: function($scope, element, attrs) {
            // here you can intialize your canvas code..
            // you will find all element 
            var container = element.finf('#container');
            var json = element.finf('#json');
            //now you have both the elements, you can play with those element
            //means you can initilize your canvas plugin here
            //don't initialize it on canvas.js. load you will never find target element.
        }
    }
});

希望对您有所帮助。谢谢。