2012-08-01 5 views
15

Qualcuno sa come associare un valore interpolato a un attributo dati utilizzando AngularJS?AngularJS bind valore nell'attributo dati

<input type="text" data-custom-id="{{ record.id }}" /> 

L'angolare non sembra interpolare tale valore poiché si distingue dalla struttura dell'elemento. Qualche idea su come risolvere questo problema?

+0

Puoi fornire esempio jsfiddle? –

risposta

6

Sembra che non ci sia un problema dopo tutto. Il modello viene analizzato e il mio controller scaricava i dati, ma quando il modello veniva analizzato i dati non erano ancora presenti. E la direttiva che ho messo ha bisogno che i dati si trovino lì nel frattempo sta solo raccogliendo dati macro vuoti.

Il modo in cui ho risolto questo era con il comando $ orologio:

$scope.$watch('ready', function() { 
    if($scope.ready == true) { 
    //now the data-id attribute works 
    } 
}); 

Poi, quando il controllore ha caricato tutta la roba ajax allora si esegue questa operazione:

$scope.ready = true; 
+0

Com'è la selectOptions rilevante per il record.id di cui hai parlato nella domanda? – Hengjie

+0

Ho aggiornato il codice per essere più rilevante. – matsko

1

Assomiglia a me ciò che siete veramente dopo è un Promise/Deferred: Modifica

// for the purpose of this example let's assume that variables '$q' and 'scope' are 
// available in the current lexical scope (they could have been injected or passed in). 

function asyncGreet(name) { 
    var deferred = $q.defer(); 

    setTimeout(function() { 
    // since this fn executes async in a future turn of the event loop, we need to wrap 
    // our code into an $apply call so that the model changes are properly observed. 
    scope.$apply(function() { 
     if (okToGreet(name)) { 
     deferred.resolve('Hello, ' + name + '!'); 
     } else { 
     deferred.reject('Greeting ' + name + ' is not allowed.'); 
     } 
    }); 
    }, 1000); 

    return deferred.promise; 
} 

var promise = asyncGreet('Robin Hood'); 
promise.then(function(greeting) { 
    alert('Success: ' + greeting); 
}, function(reason) { 
    alert('Failed: ' + reason); 
); 

: bene, ecco un esame semplice pio di utilizzare una promessa con un controller e vincolante:

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

app.controller('MyCtrl', function($scope, $q) { 
    var deferredGreeting = $q.defer(); 
    $scope.greeting = deferredGreeting.promise; 

    /** 
    * immediately resolves the greeting promise 
    */ 
    $scope.greet = function() { 
     deferredGreeting.resolve('Hello, welcome to the future!'); 
    }; 

    /** 
    * resolves the greeting promise with a new promise that will be fulfilled in 1 second 
    */ 
    $scope.greetInTheFuture = function() { 
     var d = $q.defer(); 
     deferredGreeting.resolve(d.promise); 

     setTimeout(function() { 
      $scope.$apply(function() { 
       d.resolve('Hi! (delayed)'); 
      }); 
     }, 1000); 
    }; 
});​ 

lavoro JSFiddle: http://jsfiddle.net/dain/QjnML/4/

In sostanza l'idea è che è possibile associare la promessa e si realizzerà una volta la risposta asincrona lo risolve.

+0

Questo è fantastico. Ma, potresti per favore fornire un esempio che si riferisca meglio alla mia domanda? Mi sto divertendo a capirlo. Grazie :) – matsko

+0

La sua forma sostanzialmente dritta è la documentazione ... sarebbe bello dargli qualcosa che si riferisce alla sua domanda. – Nix