Javascript AngularJS：关于基于AJAX更改DOM的体系结构的建议_Javascript_Ajax_Dom_Angularjs

Javascript AngularJS：关于基于AJAX更改DOM的体系结构的建议

javascript ajax dom angularjs

Javascript AngularJS：关于基于AJAX更改DOM的体系结构的建议,javascript,ajax,dom,angularjs,Javascript,Ajax,Dom,Angularjs,Angular的网站有一个简单的例子： function PhoneListCtrl($scope, $http) { $http.get('phones/phones.json').success(function(data) { $scope.phones = data; }); $scope.orderProp = 'age'; } 然而，我想做一些比这更复杂的事情，我不知道怎么做，即使在阅读了Angular的很多文档之后。我需要根据ajax请求的结果执行一些DOM

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操作？

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

有了指令，你就可以看到你的模型改变了。。。所以是的，用指令来做这是正确的方法

例如，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>

如果您运行此代码并打开浏览器控制台（F12）并更改输入值，您将看到我们通过指令和作用域上的$watch函数获得了新值。

给我们举个例子，我很乐意帮助您解决这个问题。除了文本，我不确定如何，因为我不知道如何为这个编写代码。1.执行ajax请求。2.根据ajax请求的结果更新DOM。3.如果再次发出ajax请求，请确保2中的视图逻辑相同。又被处决了。我不知道投反对票是为了什么。在这里有很多类似的问题，所以人们根据对问题的描述来询问架构。不是我投了反对票。那么，您真的想要更改DOM元素，还是仅仅将ajax中的文本数据绑定到元素的文本？我希望根据ajax结果实际执行条件DOM操作逻辑？$resource工厂、控制器和带有指令的视图？

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);
      })
    }
  }
});