3

我将 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父ng-viewhtml文件（其中包含已加载，而已加载#container and #jsonng-viewparentNode is not foundng-view#container and #jsonscripts

编辑：

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

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

<script type="text/javascript">

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

    })()

</script>

但它不工作

4

3 回答 3

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

希望这可以帮助你。谢谢。

于 2015-02-09T14:15:27.080 回答
1

我不完全确定您到底遇到了什么问题，但是您可以毫无问题地将<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>脚本动态填充红色文本。

但不要相信我的话。请亲自查看示例。

于 2015-02-09T22:27:04.287 回答
1

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

与其使用自定义指令（这可能有效，但很麻烦），不如直接使用内置属性

试试这个：

  1. 在主页中包含自定义 javascript 文件（来自服务器）
  2. 为画布创建另一个html文件，并将#container和#json放在那里
  3. 在子页面中，包括画布 html <div ng-include src="'/public/canvas/canvas.html'" onload="canvasReady()"></div>
  4. 在 $scope.canvasReady() 函数中调用自定义 javascript 的启动函数
于 2015-02-13T10:45:06.180 回答