Question

我有数据存储在范围内。

我想用新值更新范围。

首先，我的角度代码看起来像这样

 <div ng-controller="objectCtrl" >
     <div id="object_container" ng-repeat="object in objects track by $index">
     <div>{{object.name}}</div>
  </div>

并使用ng-repeat

显示在页面上

   var scope = angular.element($("#object_container")).scope();
        scope.$apply(function(){
        console.log(scope.objects);  // before update
        scope.objects = data[1];
        console.log(scope.objects);  // after update
    });

到目前为止一直很好，但后来我使用来自我的ajax脚本的新数组（不在角度应用程序或控制器内）更新范围

'use strict';

var angular_app = angular.module('angular_app', []);


 angular_app.controller('objectCtrl', ['$scope', function ($scope) {

    $scope.objects = [
{id: 1, name: "ma route angulaire1", cote: "10.5", style: "jungle", centre: "supercentre", img: "x"},
{id: 2, name: "ma route angulaire2", cote: "10.5", style: "jungle", centre: "supercentre", img: "x"},
{id: 3, name: "ma route angulaire3", cote: "10.5", style: "jungle", centre: "supercentre", img: "x"}
];

  }]);

因此，在控制台中，我可以看到新值与作用域相符，但在页面本身上没有更新。

修改

我的代码; 角

 var data = load_content(target).then(function (response) {
           // console.log('Target -> ' + target);
            data = response;


        var scope = angular.element($("#object_container")).scope();
        scope.$apply(function(){
            console.log(scope.objects);
        scope.objects = data[1];
        console.log(scope.objects);
    });

我用来从我的角度应用程序外部更新范围的JavaScript。它是一个承诺javascript函数来处理ajax请求

$data = array();
$data[0] = "OK";  // status from server OK/ERROR
$data[1][0]->id = "4";
$data[1][0]->name = "route Angulaire";
$data[1][0]->cote = "10.5";
$data[1][0]->style = "jungle";
$data[1][0]->centre = "some center";

data [1]是用这样的php构建的;

function load_content(target){
     return new Promise(function (resolve, reject) {
        $.ajax({
        url: '/ajax-processor.php',  
        type: 'POST',                  
        data: { 'ajaxKey':'MyKey' ,'target': target },
        success: function (data, status) {   
            resolve(data);  
            console.log(data);

           if(data[0] == 'ERROR'){    // display error

                $('#error_frame').removeClass("hidden");
                $('#error_frame').html(data[1]);

            }
            else if(data[0] == 'OK'){  // we proceed

            }
        },
        error: function (xhr, desc, err) { // sinon il y a erreur
            console.log(xhr);
            console.log("Details: " + desc + "\nError:" + err);
            return;
        }
    });// end ajax call  


 });
}

**加载内容JS功能**

$(document.body).ready(function () {
    $(document.body).on("click", "a", function (event) {
        event.preventDefault(event);
       // console.log('Clicked a link');
        var id = ($(this).attr("id"));
        var target = ($(this).attr("data-target"));
        var link = ($(this).attr("href"));
        var text = ($(this).text());
        var html = ($(this).html());
        /// vérification necessaire
        ///
        //$(container).addClass("visible");


        var data = load_content(target).then(function (response) {
           // console.log('Target -> ' + target);
            data = response;


        var scope = angular.element($("#object_container")).scope();
        scope.$apply(function(){
            console.log(scope.objects);
        scope.objects = data[1];
        console.log(scope.objects);
    });


        });


        $(target).html('<img scr="/images/html/ajax-load.gif"');
    }); // end on click a  
});  // end document ready

我正在调用来自此jquery事件侦听器的加载内容

{{1}}

什么不见了？

谢谢

角度范围$ apply（）更新我的范围而不刷新页面上的数据

0 个答案: