jquery - 无法开始执行某个功能

Question

我编写了一个相当简单的函数，其中包含一些 Jquery 代码，但由于某种原因我无法让它工作。

我错过了什么？

Codepen

HTML

<div ng-app='myApp'>
<div ng-controller="DropdownCtrl">

  <p>Here should be five -> &nbsp;</p>

</div>
</div>

JS

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

myApp.controller('MainCtrl', function ($scope) {

  $scope.onload = function(scope) {
    $('p').each(function(){
      $(this).html($(this).html().replace(/ /gi,"5"));
    });
  };

});

Answer 1

You shouldn't be manipulating the DOM in a controller有很多原因，Angular 文档和许多 StackOverflow 票证中对此进行了详细说明。

推荐阅读:

• "Thinking in AngularJS" if I have a jQuery background?
• Separating DOM manipulation from Angular controllers - Best Practice wanted
• Things I Wish I Were Told About Angular.js

Angular Controller 中没有 load 事件(如果有，则会使用 $scope.$on('load',function(){}); 调用方法)。

您应该在此处使用 Angular 数据绑定(bind)/插值。这是一个例子:

<p>Here should be five -> {{number}}</p>

还有你的 Controller :

var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', function ($scope) {
  $scope.number = 5;
});