AngularJS 使用 document.getElementById 仅查找一次元素-解网

问：

当您单击特定项目时，右侧会出现一个面板页面。

调用 Angular JS 代码以在面板打开时执行操作。

Angular JS 代码应该在 HTML 文档中查找 id 值为“view-link”的元素。

但是，它仅在首次打开面板时查找项目，并且在面板关闭然后重新打开时找不到元素。

在开发人员模式下，元素查找通常使用与代码相同的语法执行。

我必须刷新（F5）才能再次检索它。

怎么了？

将其视为变量或控制器初始化问题，我们将link_element_2变量配置为在没有 href 值的情况下进行初始化link_element。

您尝试查找的 html 代码如下所示，并且在打开面板时始终包含。

<a id="view-link" href="https://www.google.com">https://www.google.com</a>

我的代码：

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
     console.log('widget load!!!');
     var link_element = null;
     var link_element_2 = null;
     console.log(link_element);
     var youtube_link = null;
     console.log(youtube_link);
     
    link_element = angular.element(document.getElementById('view-link'));
    console.log('link_element IS');
    console.log(link_element);
  
    if(link_element.attr('href') == undefined)
    {
        console.log('In if case');
        link_element_2 = angular.element(document.getElementById('view-link'));
        console.log('link_element_2 IS');
        console.log(link_element_2);
    }
        
    $scope.controllerActive = true;
              
    $scope.$on("$destroy", function() {
        $scope.controllerActive = false;
        console.log("Controller destroyed");
    });
 
});

结果如下。
该屏幕是开发人员模式下的控制台日志。

在此处输入图像描述

javascript html jquery angularjs

var app = angular.module('myApp', []);

app.controller('myCtrl', ['$scope', '$timeout', function($scope, $timeout) {
     console.log('widget load!!!');
     var link_element = null;
     var link_element_2 = null;
     console.log(link_element);
     var youtube_link = null;
     console.log(youtube_link);
     
     $timeout(function() {
        link_element = angular.element(document.getElementById('view-link'));
        console.log('link_element IS');
        console.log(link_element);
      
        if(link_element.attr('href') == undefined)
        {
            console.log('In if case');
            link_element_2 = angular.element(document.getElementById('view-link'));
            console.log('link_element_2 IS');
            console.log(link_element_2);
        }
     });

     $scope.controllerActive = true;

     $scope.$on("$destroy", function() {
         $scope.controllerActive = false;
         console.log("Controller destroyed");
     });

}]);

让我知道这是否有效。

上一个：当两个字段单击时，如何用连接线链接两个字段。在angularJs中

下一个：Twitter 身份验证，子窗口在窗口打开时返回 closed true

AngularJS 使用 document.getElementById 仅查找一次元素

AngularJS uses document.getElementById to find elements only once

评论