angularJS在ng视图中加载非角度javascript文件

我为我的客户端画布绘图应用程序使用带有ng视图的ng route。 图形代码位于单独的非角度js文件中。 我需要把

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

---

但是它不起作用

将脚本引用放在主页html本身中，不要从特定的html文件加载这些引用。只在该页面中放置html。 不要在初始化时从js调用canvas函数，您将永远找不到

#容器

&

#json

要使它们工作，您需要在该指令元素在视图上呈现时从指令调用它

HTML

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

---

希望这能对你有所帮助。谢谢。

我不完全确定您到底遇到了什么问题，但是您可以将

标记加载到模板中，不会出现任何问题只要它位于底部，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>

结果将是脚本动态填充红色文本的

---

但别相信我的话

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

与其使用自定义指令（这可能有效，但很麻烦），为什么不使用内置属性呢

试试这个：

在主页中包含自定义javascript文件（来自服务器）

为画布创建另一个html文件，并将#容器和#json放在那里

在子页面中，包括画布html

在$scope.canvasReady（）函数内调用自定义javascript的起始函数

---

这很奇怪。我在我的机器上试过同样的东西，但它不起作用。@OMGPOP-你在你的机器上使用的是什么版本的Angular？也，您是从本地web服务器（如node.js）运行此程序，还是仅从文件系统加载文件？是在主页还是subpage@OMGPOP它应该在子页面中。当特定的路由页面在那个时候这个子视图将呈现在html上，然后您的指令将开始工作，就像我在回答中所做的。为什么您有templateUrl？我已经有一个路由器来替换ng视图的子页面。或者我应该删除ng视图吗？@OMGPOP不需要删除所需的ng视图。。您只需要在元素上添加指令。。这样您就可以获得该元素。。然后从指令中，您可以在该元素上绘制js铅垂图。。

<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.
        }
    }
});

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

(function(){

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

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

}());