angularjs - AngularJSは値をデータ属性にバインドします

Question

AngularJS を使用して補間値をデータ属性にバインドする方法を知っている人はいますか?

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

要素の構造の一部であるため、Angular はその値を補間していないようです。これを修正する方法はありますか？

Answer 1

結局問題なさそうです。テンプレートが解析され、コントローラーがデータをダウンロードしていましたが、テンプレートが解析されているとき、データはまだありませんでした。そして、私が入れたディレクティブは、空のマクロデータを取得するまでの間、データがそこにある必要があります。

これを解決した方法は、 $watch コマンドを使用することでした:

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

次に、コントローラーがすべての ajax をロードしたら、次のようにします。

$scope.ready = true;

Answer 2

私にはあなたが本当に求めているのは約束/延期のようです：

// 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);
);

編集：そうです、コントローラーとバインディングでPromiseを使用する簡単な例を次に示します。

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);
    };
});​

動作中のJSFiddle：http: //jsfiddle.net/dain/QjnML/4/

基本的には、promiseをバインドでき、非同期応答がそれを解決すると、promiseが実行されるという考え方です。