在角度更新模型後獲取DOM元素

角度新角色。我正在嘗試在模型更新後獲取DOM元素，但是我得到空值。這是我的HTML代碼。在角度更新模型後獲取DOM元素

<div ng-repeat="file in files"> 
<span id="file{{file.id}}">{{file.name}}</span> 
<canvas id="canvas{{file.id}}" /> 
</div>

這裏是我的控制器代碼

angular.module('mycontrollers',[]) 
.controller('FileController',function(FileService) { 
     $scope.files = {}; 
    FileService.updateFiles() 
     .then(
     function(data) { 
      $scope.files = data.files; 
      updateCanvas($scope.files); 
     },function(err) { 
      console.log("error occured"); 
     }; 
}; 
function updateCanvas(files) { 
    files.forEach(function(file){ 
    var canvas = document.getElementById('canvas'+file.id); 
    ... 
    do something with canvas 
    ... 
    } 
}

畫布是空例如document.getElementById沒有找到的元素。來自服務器的響應正確返回（因此我沒有添加FileService代碼）。 data.files包含適當的數據。

如何獲取模型更新後的元素？

來源

2015-05-10 andthereitgoes

過得好控制檯任何錯誤？並且服務器的響應是否正確？ –

錯誤是'canvas'變量爲空，因爲我猜測模型（因此DOM）尚未更新，當我調用updateCanvas時。來自服務器的響應包含正確的數據。 – andthereitgoes

這是因爲模型已經更新，但DOM仍然沒有。

你可以做的是叫你updateCanvas函數超時，這將確保功能的DOM後運行更新：

.controller('FileController',function(FileService, $timeout) { 
    .... 
    $timeout(function() { updateCanvas($scope.files) });

來源

2015-05-10 13:52:33 eladcon

我會建議使用指令對於這種DOM操作，而不是直接使用ID進行DOM操作。

這裏的工作示例：

http://jsfiddle.net/jigardafda/1ou63cgf/2/

HTML

<div ng-app="app"> 
    <div ng-controller="tcrtl"> 
     <div ng-repeat="file in files"> 
      <span>{{file.name}}</span> 
      <my-canvas conf="file"></my-canvas> 
     </div> 
    </div> 
</div>

var app = angular.module('app', []); 
app 
    .service('FileService', function($q){ 
     // Mocked service 
     var files = [ 
      { 
       name: "ONE", 
       id: 'one' 
      }, 
      { 
       name: "TWO", 
       id: 'two' 
      } 
     ] 

     this.updateFiles = function(){ 
      var deferred = $q.defer(); 
      deferred.resolve({ 
       files: files 
      }); 
      return deferred.promise; 
     }; 

    }) 
    .directive('myCanvas', function(){ 
     return { 
      restrict: 'E', 
      template: "<canvas id='{{conf.id}}' />", 
      scope: { 
       conf: '=' 
      }, 
      controller: function(){ 
       // Do something 
      }, 
      link: function(scope, ele, attr){ 
       var c = ele[0].querySelector("canvas"); 
       var ctx = c.getContext("2d"); 
       ctx.fillStyle = "#FF0000"; 
       ctx.fillRect(0,0,150,75); 
      } 
     } 
    }) 
    .controller('tcrtl',function($scope, FileService) { 
     $scope.files = {}; 
     FileService.updateFiles().then(
      function(data) { 
       $scope.files = data.files; 
      },function(err) { 
       console.log("error occured"); 
      }); 
    });

來源

2015-05-10 14:03:19

在角度更新模型後獲取DOM元素

回答

相關問題