如何在AngularJS中替代window.onload实现链接初始化功能？

嘿，我来帮你把这个原生JS的链接设置逻辑改成AngularJS的风格～AngularJS核心是数据驱动视图，所以我们可以完全抛弃直接操作DOM的写法，用更符合Angular理念的方式实现：

方法一：基础数据绑定（推荐） #

这种方式最贴合Angular的设计，不需要手动处理页面加载事件，Angular会自动帮我们完成视图和数据的同步。

首先是HTML视图部分，我们用ng-href（比原生href更安全，避免链接未解析时的无效点击）绑定变量，同时直接设置target="_blank"：

<!-- 先定义Angular应用和控制器 -->
<div ng-app="linkApp" ng-controller="LinkCtrl">
  <a id="linkYoutube" ng-href="{{link1}}" target="_blank">YouTube</a>
  <a id="linkSteam" ng-href="{{link2}}" target="_blank">Steam</a>
  <a id="linkGithub" ng-href="{{link3}}" target="_blank">GitHub</a>
</div>

然后是JS部分，创建Angular模块和控制器，把你的链接值挂载到$scope上：

// 定义Angular应用模块
angular.module('linkApp', [])
// 定义控制器，处理链接数据
.controller('LinkCtrl', function($scope) {
  // 替换成你实际的链接地址
  $scope.link1 = '你的YouTube链接';
  $scope.link2 = '你的Steam链接';
  $scope.link3 = '你的GitHub链接';
});

方法二：保留“设置函数”的写法 #

如果你习惯原来的setUpLinks函数逻辑，也可以把它放到控制器里，Angular初始化后会自动执行：

angular.module('linkApp', [])
.controller('LinkCtrl', function($scope) {
  $scope.setUpLinks = function() {
    // 在这里设置链接值
    $scope.link1 = '你的YouTube链接';
    $scope.link2 = '你的Steam链接';
    $scope.link3 = '你的GitHub链接';
  };

  // Angular初始化完成后自动调用函数
  $scope.setUpLinks();
});

视图部分和方法一完全一样，还是用ng-href绑定变量。

为什么不用原生DOM操作？ #

AngularJS不推荐直接用getElementById或setAttribute这种方式操作DOM，因为这会打破Angular的数据驱动模式，而且当数据变化时，视图不会自动同步。用数据绑定的方式，后续如果需要修改链接，只要更新$scope里的变量，视图就会自动更新，非常方便。

内容的提问来源于stack exchange，提问作者Ariteku