Question

我使用ng-route和ng-view作为我的客户端画布绘图应用程序。绘图代码位于分离的非角度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视图中的

。

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

我尝试将scripts放入父html文件（其中包含ng-view），并将#container and #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＆amp; #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.
        }
    }
});

希望这可以帮到你。感谢。

Answer 2

我并不完全确定您遇到的问题是什么，但您可以将<script>标记加载到模板中而不会出现任何问题。 只要它在底部，DOM元素在执行时就可用。

想象一下，我们有一个看起来像这样的模板：

<div class="row">
  <div class="col-sm-12">
    <h1 id="title_header"></h1>
    <script src="dynamic-element.js" type="text/javascript"></script>
  </div>
</div>

您可以看到我们的<h1>元素中包含id="title_header"。我们在此模板中加载的脚本看起来像这样。

(function(){

  var h1 = document.getElementById('title_header');

  h1.innerText = "I was created dynamically by plain old JavaScript";
  h1.style.color = 'red';

}());

结果将是由脚本动态填充红色文本的<h1>。

但是不要接受我的话。 See the example for yourself

Answer 3

现有方法无法在子页面中包含javascript文件。（我不认为Josh的解决方案适用于实际的服务器）。

为什么不使用build in属性

而不是使用自定义指令（可能有效，但很麻烦）

试试这个：

在主页面（来自服务器）中包含自定义javascript文件
为画布创建另一个html文件，并将#container和#json放在那里
在子页面中，包含画布html <div ng-include src="'/public/canvas/canvas.html'" onload="canvasReady()"></div>
在$ scope.canvasReady（）函数

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

3 个答案: