無法上班的功能

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

您不應該在控制器中操作DOM，原因有很多，詳見Angular文檔和許多StackOverflow票證。

推薦閱讀：

• 如果我有jQuery背景，“在AngularJS中思考”？
• 將DOM操作與Angular控制器分開 - 需要最佳實踐
• 我希望我關注Angular.js的事情

Angular控制器中沒有load事件（如果有的話會使用$scope.$on('load',function(){});調用$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

一些東西：

1. codepen有錯誤的順序jqueryui和jquery，所以你得到一個錯誤。 此外，控制器被稱為MainCtrl但在HTML中你有DropdownCtrl 。

2. 至於實際的錯誤：僅僅因為你調用函數onload並不意味着它實際上在控制器啟動時執行。 把它從這個功能中拿出來它就會按照你的意圖行事。

像這樣：

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

新筆

雖然這可能適用於此實例，但您不應該在控制器中操作DOM。 Angular控制器的第一條規則是：

“控制器應該只包含業務邏輯。將任何表示邏輯放入控制器會顯着影響其可測試性.Angular在大多數情況下使用數據綁定，並且指令用於封裝手動DOM操作。”

閱讀更多angularjs.org→