找不到元素

Question

我遇到了找不到元素的问题。我有这个 Ui-来自 ui-路由器的状态，叫做 AuthDesc，对于 templateURL，我有这个：

  <head>
    <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

  </head>
  <body>

<textarea id="SimpleMDE">
# This one autosaves!
By default, it saves every 10 seconds, but this can be changed. When this textarea is included 
in a form, it will automatically forget the saved value when the form is submitted.
</textarea>

  </body>

对于 Controller 我有这个：

(function(angular) {
  var app = angular.module('ForumApp');

  app.controller('authDescCtrl', ["$scope", "$mdDialog", "$state", "$firebaseObject","refService","currentAuth",authDescCtrl])

  function authDescCtrl($scope, $mdDialog, $state, $firebaseObject,refService,currentAuth){

      $scope.topic = $firebaseObject(refService.ref().child("Topics"))


    $scope.goToPerson = function(person, event) {
      $mdDialog.show(
        $mdDialog.alert()
        .title('Navigating')
        .textContent('Inspect ' + person)
        .ariaLabel('Person inspect demo')
        .ok('Neat!')
        .targetEvent(event)
      );
    };

    $scope.goToTopic = function(avatar, date, email, title, uid, username, value) {
      $state.go("authHome.topic", {
        "AVATAR": avatar,
        "DATE": date,
        "EMAIL": email,
        "TITLE": title,
        "UID": uid,
        "USERNAME": username,
        "VALUE": value
      })

    }

  }

 new SimpleMDE({
            element: document.getElementById("SimpleMDE"),
            spellChecker: true,
            autosave: {
                enabled: true,
                unique_id: "SimpleMDE",
        },
    });

})(angular);

您可以在控制器的最后几行中看到有一个新的 MDE 生成器，但是控制台显示找不到该元素：

SimpleMDE: Error. No element was found.

我很困惑。有个叫SimpleMDE的textarea，不知道怎么找不到。这是一个 link 到野外的代码：https://ide.c9.io/amanuel2/fourm2

恐怕 Javascript 在 HTML 之前加载，所以它无法识别 ID 为 SimpleMDE 的 texarea。

Answer 1

将小部件初始化包装在 window.onload event handler 中对于 angular 控制器使用：

angular.element(document).ready(function () {
        new SimpleMDE({
            element: document.getElementById("SimpleMDE"),
            spellChecker: true,
            autosave: {
                enabled: true,
                unique_id: "SimpleMDE",
        },
    });

});

Answer 2

您也可以使用此代码来完成此操作：

$timeout(function() {

new SimpleMDE({
element: document.querySelector("#SimpleMDE"),
spellChecker: true,
autosave: {
enabled: true,
unique_id: "SimpleMDE",
}
});
});

找不到元素

Element not found

javascript

angularjs