Question

我遇到了无法找到元素的问题。我有一个名为AuthDesc的ui-router的Ui-State，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 Generator，但是控制台声明找不到该元素：

SimpleMDE：错误。没有找到任何元素。

我很困惑。有一个名为textarea的{{1}}，但我不知道它是怎么找不到的。以下是野外代码的链接：https://ide.c9.io/amanuel2/fourm2

我担心Javascript会在HTML之前加载，因此它无法识别ID为SimpleMDE的texarea。

Answer 1

在window.onload event handler中包裹您的小部件初始化对于角度控制器使用：

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",
}
});
});

找不到元素

2 个答案: