0

なぜ機能しないangular.element('<p>').css('color', 'red');のですか？

angular
  .module('app', [])
  .controller('MainController', MainController)
;

function MainController() {
  // angular.element('p').css('color', 'red'); ERROR. Now I see what the docs meant by "HTML String"
  // angular.element('<p>').css('color', 'red'); No error, but doesn't work
  angular.element(document.querySelector('p')).css('color', 'red'); // Works
}
<!DOCTYPE html>
<html ng-app='app'>

  <head>
    <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller='MainController as vm'>
    <p>test</p>
  </body>

</html>

4

1 に答える 1

1

docsによると、angular.element「jQuery にラップされる HTML 文字列または DOMElement」を取り込みます。

実際には HTML 文字列を渡しているため、2 番目の例はエラーになりません。これによりangular.element、既存のオブジェクトに作用するのではなく、新しく作成された jQuery オブジェクトが返されます。

新しい要素を変数に割り当てることで、これを説明できます。

var newElement = angular.element('<p>');

これは、完全な jQuery で見られる動作と同等です。

var newElement = $('<p>');

最後の例querySelectorでは、実際の HTML DOM 要素を返す which を使用しています。これは、Angular がその既存の要素を操作するために必要なものです (jQuery を含めていない限り、jQuery/例 1 のようにセレクターを使用できます)。

于 2015-10-09T18:37:55.830 に答える