지시문의 jqlite 생성 html에서 컨트롤러 범위 데이터 사용

Question

이 질문은 Mike의 게시물 Using ng-model within a directive에 질문 된 것과 비슷합니다.

사용자 입력 필드를 기반으로 계산 된 출력을 표시하는 작은 스프레드 시트 인 페이지를 작성하고 있습니다. 지시어를 사용하여, 나는 다음과 같이 사용자 정의 태그를 만들고있어 :

<wbcalc item="var1" title="Variable 1" type="input"></wbcalc> 
<wbcalc item="var2" title="Variable 2" type="input"></wbcalc> 
<wbcalc item="calc" title="Calculation" type="calc"></wbcalc> 

'항목'필드 참조가 내 컨트롤러에서 데이터 범위 :

$scope.var1 = '5'; // pre-entered input 
$scope.var2 = '10'; // pre-entered input 
$scope.calc = function() { 
    return parseInt($scope.var1) + parseInt($scope.var2); 
}; 

그리고 '유형'필드 지시어의 사용된다 항목을 문자열 또는 함수로 처리할지 여부를 알 수있는 논리 http://jsfiddle.net/gregsandell/PTkms/3/ I 출력 요소는 코드의 놀라운 라인 작업을 얻을 수 있습니다 : 여기

이의 바이올린의

html.append(angular.element("<span>") 
    .html(scope.$eval(attrs.item + "()")) 
); 

... 그리고 내 입력 내 스코프에 연결 얻기 위해 이것을 사용하고 있습니다 컨트롤러 데이터 (나는 Mike's post에서이있어 :.이 필드의 값을 넣어 않는 동안 당신이 내 바이올린에 입력을 변경하여 볼 수

이

var input = angular.element("<input>").attr("ng-model", attrs.item); 
$compile(input)(scope); 
html.append(input); 

..., 그들은, 계산에 바인딩되지 않습니다

컨트롤러 지향 데이터를 jqlite가 생성 한 html과 연결하는 것이 더 좋고 직관적 인 방법이 있습니까?

Answer 1

이걸 살펴보면 프로세스를 간소화 할 수 있다고 생각합니다. 하지만 당신이 각도 방식으로 생각할 필요가 각도의 최대한 활용하기 위해 - - 사용 바인딩, 직접 등

를 DOM을 조작하지 않습니다를

http://jsfiddle.net/PTkms/4/

angular.module('calculator', []).directive('wbcalc', function($compile) { 
    return { 
     restrict: 'E', 
     template: '<div><div class="span2">{{title}}</div><input ng-model="item"></div>', 
     scope: { 
      title: '@', 
      item: '=' 
     }, 
     link: function(scope, element, attrs) { 
      // Don't need to do this. 
     } 
    } 
}); 
function calcCtrl($scope) { 
    $scope.var1 = '5'; 
    $scope.var2 = '10'; 

    $scope.calc = function() { 
     // Yes, this is a very simple calculation which could 
     // have been handled in the html with {{0 + var1 + var2}}. 
     // But in the real app the calculations will be more 
     // complicated formulae that don't belong in the html. 
     return parseInt($scope.var1) + parseInt($scope.var2); 
    }; 
} 

나는 당신이 jQuery를 좋아 말했다 알고 이 예는 사용되는 절연 범위 바인딩에 읽을 도움이 될 것이다 들어

- '=' '@'와, 참조 :

http://docs.angularjs.org/guide/directive