데이터 속성에 AngularJS 값 바인딩

Question

누구든지 AngularJS를 사용하여 데이터 속성에 보간 값을 바인딩하는 방법을 알고 있습니까?

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

각도는 요소의 구조가 떨어져 있기 때문에 그 값을 보간하지 않는 것 같습니다. 어떤 아이디어가 이것을 고치는 방법?

Answer 1

어쨌든 문제가없는 것처럼 보입니다. 템플릿이 구문 분석되고 컨트롤러에서 데이터를 다운로드했지만 템플릿을 구문 분석 할 때 데이터가 아직 없습니다. 그리고 내가 지정한 지시문은 비어있는 매크로 데이터를 가져 오는 동안 데이터가 있어야합니다.

나는 이것이 $ 시계 명령이었다 해결 방법 : 다음

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

컨트롤러가 모든 아약스 물건을로드 당신이 할 :

$scope.ready = true; 

Answer 2

그것은에 보이는 당신이 진짜로 한 일은 Promise/Deferred입니다.

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

편집 : 바로 여기 간단한 시험이 있습니다. 컨트롤러와 약속을 사용하고 바인딩의 PLE :

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/

기본적 아이디어는 당신이 약속을 결합 할 수 및 비동기 응답을 해결하면 그것을 성취 될 것입니다.