2

Angular 的网站有这个简单的例子：

function PhoneListCtrl($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data;
  });

  $scope.orderProp = 'age';
}

但是，我会执行比这更复杂的事情，即使在阅读了很多 Angular 的文档之后，我也不知道该怎么做。我需要根据 ajax 请求的结果执行一些 DOM 操作。我应该如何构建这段代码？Angular 的网站特别指出：

不要将控制器用于： 任何类型的 DOM 操作——控制器应该只包含业务逻辑。

好的...那么我应该在哪里处理基于 ajax 返回数据的 DOM 操作？我意识到他们的文档是这样说的：

如果您必须执行自己的手动 DOM 操作，请将表示逻辑封装在指令中。

但我只是不确定如何将这一切正确地粘合在一起。我将如何将这一切放在一起，并以这样的方式进行，即如果再次发出 AJAX 请求，并且“模型”发生更改，仍会执行相应的逻辑来执行 DOM 操作？

基本上我在问，如果不在控制器中，你会在哪里根据 AJAX 请求执行 DOM 操作？

4

1 回答 1

0

如果您使用 $http 或 $resource 执行 AJAX 请求，您将在控制器的 $scope 中注入此 AJAX 请求的结果。

使用指令，您可以在模型更改时 $watch ......所以是的，使用指令这样做是正确的方法！

例如 HTML 部分：

<!DOCTYPE html>
<html ng-app="App">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="script.js"></script>

  </head>

  <body ng-controller="MyController">
    <h1>Usage Directive for model data change</h1>
    <div>
      <input directive type="text" ng-model="example"/>
    </div>
  </body>

</html>

脚本部分包含一个简单的控制器和一个指令：

angular.module('App', []).controller('MyController', function($scope){

    // In real prod app you'll use the $http API to get the data from the server
    $scope.example = "Example data";
  });

angular.module('App').directive('directive', function(){
  return{
    restrict: 'A',
    link: function(scope, element, attrs){
      scope.$watch(attrs.ngModel, function(newValue){
        console.log(newValue);
      })
    }
  }
});

如果您运行此代码并打开浏览器控制台 (F12) 并更改输入值，您将看到我们在您的范围内使用指令和 $watch 函数获得了新值。

于 2013-09-17T08:04:53.097 回答