访问网络资源

<!-- in TODO item: -->
<a ng-show="todo.uri" href="" ng-click="showUri(todo.uri)">(view url)</a>
<!-- at the bottom, below the end of body: -->
<webview></webview>
    

<!-- right after the "dropText" div: -->
<webview></webview>
<!-- in the TODO template, right before the end of the li: -->
<a style="display: none;" href="">(view url)</a>
    

$scope.showUri = function(uri) {
  var webview=document.querySelector("webview");
  webview.src=uri;
};
    

if(/^http:\/\/|https:\/\//.test(todoObj.text)) {
  var showUrl = el.querySelector('a');
  showUrl.addEventListener('click', function(e) {
    e.preventDefault();
    var webview=document.querySelector("webview");
    webview.src=todoObj.text;
  });
  showUrl.style.display = 'inline';
}
    

<img style="max-height: 48px; max-width: 120px;" ng-show="todo.validImage"
ng-src="{{todo.imageUrl}}"></img>
    

<img style="max-height: 48px; max-width: 120px;"></img>
    

// for each image with no imageUrl, start a new loader
$scope.loadImages = function() {
  for (var i=0; i<$scope.todos.length; i++) {
    var todo=$scope.todos[i];
    if (todo.validImage && todo.imageUrl===PLACEHOLDER_IMAGE) {
      loadImage(todo.uri, function(blob_uri, requested_uri) {
        $scope.$apply(function(scope) {
          for (var k=0; k<scope.todos.length; k++) {
            if (scope.todos[k].uri==requested_uri) {
              scope.todos[k].imageUrl = blob_uri;
            }
          }
        });
      });
    }
  }
};
    

 var maybeStartImageLoader = function(el, todo) {
    var img = el.querySelector('img');
    if (todo['extras'] && todo.extras.validImage && todo.extras.imageUrl) {
      if (todo.extras.imageUrl===PLACEHOLDER_IMAGE) {
        img.src = PLACEHOLDER_IMAGE;
        img.style.display = 'inline';
        window.loadImage(todo.extras.uri, function(blob_uri, requested_uri) {
          todo.extras.imageUrl = blob_uri;
          img.src = blob_uri;
        });
      } else {
        img.src = todo.extras.imageUrl;
        img.style.display = 'inline';
      }
    } else {
      img.style.display = 'none'; 
    }
  };
    

var uri=e.dataTransfer.getData("text/uri-list");
var todo = {text:uri, done:false, uri: uri};
if (/.png$/.test(uri) || /.jpg$/.test(uri)) {
  hasImage = true;
  todo.validImage = true;
  todo.imageUrl = PLACEHOLDER_IMAGE;
}
newTodos.push(todo);

// [...] inside the $apply method, before save(), call the loadImages method:
$scope.loadImages();
    

var uri = e.dataTransfer.getData("text/uri-list");
var extras = { uri: uri };
if (/\.png$/.test(uri) || /\.jpg$/.test(uri)) {
  hasImage = true;
  extras.validImage = true;
  extras.imageUrl = PLACEHOLDER_IMAGE;
}
model.addTodo(uri, false, extras);
    

// If there is saved data in storage, use it. Otherwise, bootstrap with sample todos
$scope.load = function(value) {
  if (value && value.todolist) {
    // ObjectURLs are revoked when the document is removed from memory,
    // so we need to reload all images.
    for (var i=0; i<value.todolist.length; i++) {
      value.todolist[i].imageUrl = PLACEHOLDER_IMAGE;
    }
    $scope.todos = value.todolist;
    $scope.loadImages();
  } else {
    $scope.todos = [
      {text:'learn angular', done:true},
      {text:'build an angular app', done:false}];
  }
}
    

/**
 * Listen to changes in the model and trigger the appropriate changes in the view
 **/
model.addListener(function(model, changeType, param) {
  if ( changeType === 'reset' ) {
    // let's invalidate all Blob URLs, since their lifetime is tied to the document's lifetime
    for (var id in model.todos) {
      if (model.todos[id].extras && model.todos[id].extras.validImage) {
        model.todos[id].extras.imageUrl = PLACEHOLDER_IMAGE;
      }
    }
  }

  if ( changeType === 'removed' || changeType === 'archived' || changeType === 'reset') {
    redrawUI(model);
  } else if ( changeType === 'added' ) {
    drawTodo(model.todos[param], list);
  } else if ( changeType === 'stateChanged') {
    updateTodo(model.todos[param]);
  }
  storageSave();
  updateCounters(model);
});