如何在ng-view(angularjs)中使用常规javascript代码

gol*_*age 5 javascript templates angularjs ng-view

第一次在这里使用angularJS.基本上,我使用了路由服务,所以我有一个带有html代码的模板中的路由调用.我还拥有模板中的代码正确显示所需的所有常规javascript函数(幻灯片演示以及许多其他内容).

当我运行时,我得到所有这些空错误(似乎我的JS函数无法找到各种元素,因为它无法访问ng-view /模板中的代码,或者它在ng-view/template加载之前运行).

当我将所有javascript函数粘贴到我为该模板指定的控制器中时,它可以工作.但我有一种感觉,我不应该这样做.使这项工作的正确方法是什么?谢谢.

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider){
    $routeProvider
    .when("/",{
        templateUrl:"about.html",
        controller:"aboutCtrl"
    })
    .when("/aboutus", {
        templateUrl:"entertainment.html"
    })
});

app.controller('aboutCtrl', function($scope){
    //placed regular javascript/jquery code here to make it work
});
Run Code Online (Sandbox Code Playgroud)

Man*_*cho 3

您的 jQuery 函数可能不起作用,因为当您处于不同的路线时,无法找到要执行它们的元素。

解决方法:

  • 最简洁的方法:将幻灯片包装到角度指令中,在其中定义其 html 模板及其必要的代码。仅当调用模板时才会执行代码。由于您刚刚开始使用 Angular,因此您可能需要更多帮助。
  • 将代码放入模板中:您还可以尝试通过 <script></script> 块将所需的 JS 放入模板中。这样,只有在加载模板时才会评估代码。
  • 正如您所说,您也可以将代码放入控制器中。但它会让你的控制器变得臃肿并使你的代码很快变得混乱

选项 2 和 3 可以,但也会很快让你的应用程序变得一团糟。我绝对建议深入研究角度指令,以保持代码整洁。

也许本教程对您来说是一个很好的起点。