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

Question

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

当我运行时，我得到了所有这些空错误（似乎我的 JS 函数找不到各种元素，因为它要么无法访问 ng-view/template 中的代码，要么在加载 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
});

Answer 1

您的 jQuery 函数可能不起作用，因为当您在不同的路线上时，找不到要执行它们的元素。

解决方法：

• 最简洁的方法：将幻灯片包装成一个角度指令，在其中定义它的 html 模板和必要的代码。只有调用模板时才会执行代码。 由于您刚刚开始使用 Angular，因此您可能需要更多帮助。
• 将代码放入模板中：你也可以尝试把你需要的 JS 通过 块进入模板。这样一来 只有在加载模板时才会评估代码。
• 如您所说，您也可以将代码放入控制器中。但它会让你的控制器膨胀并让你的代码很快变得混乱

选项 2 和 3 会起作用，但也会很快让您的应用变得一团糟。我肯定会建议深入研究 angular 指令，以保持代码干净。

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