AngularJS为了实现dom渲染结束之后JS 操作（非动态数据）

最新推荐文章于 2021-08-06 12:24:16 发布

Z_BuzzLightyear

最新推荐文章于 2021-08-06 12:24:16 发布

阅读量1.4k

点赞数

分类专栏： AngularJS 1.x版本学习文章标签： AngularJS dom 渲染结束之后

本文链接：https://blog.youkuaiyun.com/BuzzEQ/article/details/80895162

版权

AngularJS 1.x版本学习专栏收录该内容

10 篇文章

订阅专栏

本文探讨如何在AngularJS中进行DOM渲染后的JS操作，特别是针对非动态数据的情况。介绍了使用Ionic框架的方法以及AngularJS自定义指令的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了实现dom渲染结束之后JS 操作（非动态数据）

ionic 实现方式

var app = angular.module('myApp',[]);
app.controller('myCtrl',['$scope',function(){
   $scope.$on("$ionicView.enter", function () {

      });
}])

AngularJS指令方式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="components/angular/angular.min.js"></script>
</head>

<body>
  <div ng-app="a6_5">
      <div ng-controller="c6_5">
          <span ng-click="clickTest()" on-finish-render="callMethod('这就是勇士这么优秀的原因，没人把自己放在球队前面')">
              {{text | limitTo:limitnum}}
          </span>
          <span ng-if="isHidden">
              ...
          </span>
          <span ng-class="getLength('1234555666')">

          </span>
      </div>
  </div>
  <script type="application/javascript">
      var myApp = angular.module('a6_5', []);
      myApp.directive('onFinishRender', ['$timeout', '$parse', function ($timeout, $parse) {
          return {
              restrict: 'A',
              link: function (scope, element, attr) {
                  // if (scope.$last === true) {
                      alert(1);
                      $timeout(function () {
                          scope.$emit('ngRepeatFinished'); //事件通知  
                          var fun = scope.$eval(attr.onFinishRender);
                          if (fun && typeof (fun) == 'function') {
                              fun(); //回调函数  
                          }
                      });
                  // }
              }
          }
      }])
      myApp.controller('c6_5', ['$scope', function ($scope) {
          $scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
              $scope.callMethod = function (string) {
                  if(string.length  > 20){
                      $scope.limitnum = 20;
                      $scope.isHidden = true;
                  }else{
                      $scope.limitnum = string.length;
                      $scope.isHidden = false;
                  }
              }
          });

          $scope.text =
              "这就是勇士这么优秀的原因，没人把自己放在球队前面，这就是我跟马特-巴恩斯昨天聊的事情，我们聊了勇士这些球员多么棒，聊了那里的化学反应多么棒，那里的领袖是多么出色，像库里这样的球员，他只在乎赢球，他拿到过MVP，他有着不错的合同，他很受欢迎，这都是关于赢球和帮助球队的问题，他不自负，不在乎自己，他只想赢球，库里就是这样的人。”海伍德说道";
          // $scope.limitnum = 30;
          // $scope.isHidden = true;
          // alert($scope.text.length);
          $scope.clickTest = function () {
              alert($scope.isHidden);
              if ($scope.isHidden) {
                  $scope.limitnum = $scope.text.length;
                  $scope.isHidden = !$scope.isHidden;
              } else {
                  $scope.limitnum = 30;
                  $scope.isHidden = !$scope.isHidden;
              }
          }
      }])
  </script>

  - 备注：指令中的广播事件，在控制器中声明事件