将 Javascript 函数转换为 AngularJS 函数

Question

我编写了一个在两个 div 元素之间切换的简单 javascript 函数。像这样：

function goToResults() {
    document.getElementById("services").style.display = "none";
    document.getElementById("results").style.display = "block";
}

在学习 Angular 时，我想将其转换为 app.js 中的 Angular 函数。我可以执行以下操作吗？

$scope.goToResults = function () {
    $scope.getElementById("services").style.display = "none";
    $scope.getElementById("results").style.display = "block";
}

谢谢！

Answer 1

您提供的这段代码存在一些问题。

首先，没有 AngularJS 的唯一功能。它们与任何其他 javascript 函数相同。如果你想在 AngularJS 的范围内使用“javascript”函数，你可以这样做：

function goToResults() {
   ...
}

$scope.goToResults = goToResults;

其次，在控制器内处理 DOM 操作被认为是一种不好的做法。改用指令。

第三，据我了解，您希望根据某些事件显示或隐藏 div。有一些内置功能可以做到这一点（ng-show、ng-hide、ng-if）。

您似乎缺乏一些关于 Javascript 和 AngularJS 的基础知识，我建议您阅读 Angular 自己的文档 https://docs.angularjs.org/tutorial 给出的示例教程

Answer 2

技术上可以使用

$scope.goToResults = function () {
    document.getElementById("services").style.display = "none";
    document.getElementById("results").style.display = "block";
}

但是，这并不是一种非常“有角度”的方式。 this question 的答案中描述了更“角度”的路线。一般来说，引用特定元素不是“角度”的方式；相反，它寻求有一组 javascript 实用程序可供（已处理的）HTML 使用，例如指令，它们本质上是用于 HTML 的新元素或属性。指令的实现与使用这些属性或元素修改的元素没有直接耦合，这使得 Angular 更加可重用，并且在我和许多其他人的意见中，一旦你习惯了它就更容易阅读和编写.