Javascript 为什么动态添加的标记（角度指令）会给出未定义的？

我有以下代码

CONTROLLERS.JS//将cookieNotifier.html注入index.html

angular.module('app', [])
.controller('MainController', function ($scope) {

})
.directive('cookieNotification', function () {
    return {
        templateUrl: '../Pages/cookieNotifier.html'
    }
})

cookieNotifier.html

<h4 id="cookieNotifier">

    This site uses cookies.
    By continuing to browse the site, you are agreeing to our use of cookies.

    <span><button id="acceptCookies">Got It</button></span>
</h4>

当我想隐藏/删除h4标签时，它什么也不做。它只是给了我一个未定义的定义

$（document）.ready（）中包含的代码仅在 页面文档对象模型（DOM）已准备就绪，JavaScript代码可以 执行

提及

让我告诉你事件的时间表：

• 文档已准备就绪
• Angular应用程序已初始化
• 你的指令被称为

发生的是您的代码：

if(cookiesAccepted === "true" || cookiesAccepted === null) {
    console.log($('#cookieNotifier').html());
    console.log("hide cookie notification bar")
}

甚至在angular应用程序初始化之前运行，而angular应用程序会依次调用您的指令。因此，将不会有id=

cookieNotifier

的HTML元素，因此

未定义

您可以做的是将显示/隐藏逻辑移到指令本身中。像这样修改您的指令

.directive('cookieNotification', function () {
  return {
    restrict: 'E',
    replace: false,
    templateUrl: '../Pages/cookieNotifier.html',
    link: function(scope,element,attributes) {
      var cookiesAccepted = localStorage.getItem('cookiesAccepted');
      if(cookiesAccepted === "true" || cookiesAccepted === null) {
        //console.log($('#cookieNotifier').html());
        //console.log("hide cookie notification bar");
        scope.showNotification = false;
      }
      else{
        //console.log( "show cookie notification bar");
        scope.showNotification = true;
      }
    }
 }
})

然后，您可以在模板中使用
showNotification
来显示/隐藏消息

<h4 id="cookieNotifier" ng-if="showNotification">

This site uses cookies.
By continuing to browse the site, you are agreeing to our use of cookies.

<span><button id="acceptCookies">Got It</button></span>


这个网站使用cookies。
继续浏览本网站，即表示您同意我们使用cookie。
知道了


$（document）.ready（）中包含的代码仅在
页面文档对象模型（DOM）已准备就绪，JavaScript代码可以
执行

提及

让我告诉你事件的时间表：


文档已准备就绪

Angular应用程序已初始化

你的指令被称为

发生的是您的代码：

if(cookiesAccepted === "true" || cookiesAccepted === null) {
    console.log($('#cookieNotifier').html());
    console.log("hide cookie notification bar")
}

甚至在angular应用程序初始化之前运行，而angular应用程序会依次调用您的指令。因此，将不会有id=

cookieNotifier

的HTML元素，因此

未定义

您可以做的是将显示/隐藏逻辑移到指令本身中。像这样修改您的指令

.directive('cookieNotification', function () {
  return {
    restrict: 'E',
    replace: false,
    templateUrl: '../Pages/cookieNotifier.html',
    link: function(scope,element,attributes) {
      var cookiesAccepted = localStorage.getItem('cookiesAccepted');
      if(cookiesAccepted === "true" || cookiesAccepted === null) {
        //console.log($('#cookieNotifier').html());
        //console.log("hide cookie notification bar");
        scope.showNotification = false;
      }
      else{
        //console.log( "show cookie notification bar");
        scope.showNotification = true;
      }
    }
 }
})

然后，您可以在模板中使用
showNotification
来显示/隐藏消息

<h4 id="cookieNotifier" ng-if="showNotification">

This site uses cookies.
By continuing to browse the site, you are agreeing to our use of cookies.

<span><button id="acceptCookies">Got It</button></span>


这个网站使用cookies。
继续浏览本网站，即表示您同意我们使用cookie。
知道了

将
cookieNotifier.html
的代码包含为
#cookieNotifier
不清楚。@AniketSinha抱歉，忘记粘贴代码您是否未定义
console.log（$（'#cookieNotifier'）.html（））？@AniketSinha是的。实际上，我试图通过执行$（'cookieNotifier'）.hide（）来隐藏，但什么也没发生。然后将$（'#cookieNotifier'）.html（）放在console.log中，发现它无法看到html元素include code for
cookieNotifier.html
，因为
#cookieNotifier
不清楚。@AniketSinha抱歉，忘记粘贴代码了
console.log（$（'#cookieNotifier'）.html（））是否有未定义的代码？@AniketSinha是的。实际上，我试图通过执行$（'cookieNotifier'）.hide（）来隐藏，但什么也没发生。然后将$（'#cookieNotifier'）.html（）放在console.log中，发现它看不到html元素。非常感谢这些代码。它工作得很好。伟大的代码！：）谢谢你的密码。它工作得很好。伟大的代码！：）