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

Question

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

当我运行时出现所有这些空错误(似乎我的 JS 函数无法找到各种元素，因为它要么无法访问 ng-view/template 中的代码，要么在 ng-view/template 加载之前运行)。

当我将我所有的 javascript 函数粘贴到我为该模板分配的 Controller 中时，它起作用了。但我有一种感觉，我不应该那样做。使这项工作正确的方法是什么？谢谢。

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

Answer 1

您的 jQuery 函数可能无法正常工作，因为当您在不同的路径上时，无法找到应执行它们的元素。

解决方法:

• 最简洁的方式:将您的幻灯片包装到一个 Angular Directive(指令)中，您可以在其中定义它的 html 模板和必要的代码。只有在调用模板时才会执行代码。 由于您刚刚开始使用 Angular，因此在这方面您可能需要更多帮助。
• 将代码放入模板中:您也可以尝试将您需要的 JS 通过 < script >> block 进入模板。那样的 只有在加载模板时才会评估代码。
• 如您所说，您还可以将代码放入 Controller 中。但它会使您的 Controller 膨胀并使您的代码很快变得困惑

选项 2 和 3 可行，但也会很快将您的应用变成一团糟。我肯定会建议深入研究 Angular Directive(指令)，以保持代码整洁。

也许 this tutorial对您来说可能是一个很好的起点。