Question

我用一些Jquery代码编写了一个非常简单的函数，但由于某些原因我无法使它工作。

我错过了什么？

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(/&nbsp;/gi,"5"));
    });
  };

});

Answer 1

You shouldn't be manipulating the DOM in a controller有很多原因，详见Angular文档和一些StackOverflow故障单。

推荐阅读：

Angular控制器中没有load事件（如果有的话会使用$scope.$on('load',function(){});方法调用）。

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

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

你的控制器：

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

Answer 2

一些事情：

codepen的jqueryui和jquery的顺序错误，所以你得到一个错误。此外，控制器名为MainCtrl，但在HTML中您有DropdownCtrl。
至于实际的错误：仅仅因为你调用函数onload并不意味着它实际上在控制器启动时执行。把它从那个功能中拿出来，它就会按照你的意图行事。

像这样：

myApp.controller('MainCtrl', function ($scope) {
    $('p').each(function(){
      $(this).html($(this).html().replace(/&nbsp;/gi,"5"));
    });
});

New pen

虽然这可能在这个实例中起作用，但你不应该在控制器中操纵DOM。 Angular控制器的第一条规则是：


“控制器应该只包含业务逻辑。将任何表示逻辑放入控制器会显着影响其可测试性.Angular在大多数情况下使用数据绑定和指令来封装手动DOM操作。”


Read More at angularjs.org →

无法上班的功能

2 个答案: