Question

我有一个问题。我做了一个ajax-post请求然后它正确执行然后我得到了响应。处理后我需要再做一个响应得到ajax-get然后那些数据我设置为范围内的变量。数据是成功分配给变量但html元素不刷新。这是示例代码。

这是html部分

<div ng-controller="AppManagerCtrl" >
    <md-list-item ng-repeat="app in apps">
        <div>   
            <div flex="20" layout-padding>
            <p>{{app.appId}}</p>
        </div>
        <div flex="20" layout-padding>
            <p>{{app.appName}}</p>
        </div>       
     </md-list-item> 
</div>

这是角度服务

app.service('AppManagerService',function($http){

    this.loadApps = function(){
        var request = $http.get('apps');
        return request.then(handleSuccess,handleError);
    };

    this.submitApp = function(){
        var request = $http.post('apps',
                                $('#newAppDetail').serialize(),
                                {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}
                        );

        return request;
    };

    function handleError(responce){
        console.log(responce);
    }

    function handleSuccess( response ) {
        return response.data.value;
    }

});

这是角度控制器

app.controller('AppManagerCtrl', function($scope,$mdDialog,$mdMedia,AppManagerService) {

    function loadApps(){
        AppManagerService.loadApps().then(function(apps){
                $scope.apps = apps;
                console.log($scope.apps);
            }
        );
    }

    loadApps();

    $scope.submitNewApp = function(){

        AppManagerService.submitApp().then(function(responce){
            var data = responce.data;
            if(data.status == 1){
                loadApps();
            }
        });

    };

});

所有这些都在html body中。从开始html部分然后是角度服务，最后是控制器。

Answer 1

ajax调用的结果不受Angular监控，这就是为什么你的范围没有更新（虽然它会在摘要中）。

要解决此问题，您必须手动调用$ scope.apply（）。

但是，如果另一个摘要已在进行中，则会引发错误。因此，使用$ timeout实用程序更安全：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.mycompany.app</groupId>
  <artifactId>my-app</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>jar</packaging>

  <name>Maven Quick Start Archetype</name>
  <url>http://maven.apache.org</url>

  <dependencies>
    <dependency>
     <groupId>com.twitter</groupId>
     <artifactId>hbc-core</artifactId> 
     <version>2.2.0</version> 
    </dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.8.2</version>
      <scope>test</scope>
    </dependency>
  </dependencies>
</project>

在发出ajax-post请求后，html元素不会以角度刷新

1 个答案: