Angular에서의 양방향 데이터 바인딩JS 디렉티브

Angular에서의 양방향 데이터 바인딩JS 디렉티브

데이터베이스에 저장된 필드의 유형과 매개변수에 따라 양식에 다른 "위젯"을 표시할 수 있도록 지시문을 정의하려고 했습니다.다양한 시나리오에 대응할 필요가 있기 때문에 레이아웃에 대한 지시가 필요합니다.

몇 가지 예를 가지고 놀다가, *kinda*가 동작하는 코드를 생각해 냈습니다.

HTML

<input type="text" ng-model="myModel" style="width: 90%"/>  
<div class="zippy" zippy-title="myModel"></div>

지시.

myApp.directive('zippy', function(){
    return {
      restrict: 'C',
      // This HTML will replace the zippy directive.
      transclude: true,
      scope: { title:'=zippyTitle' },
      template: '<input type="text" value="{{title}}"style="width: 90%"/>',
      // The linking function will add behavior to the template
      link: function(scope, element, attrs) {
            // Title element
            element.bind('blur keyup change', function() {
                scope.$apply(read);
            });

            var input = element.children();


            function read() {
                scope.title = input.val();
            }
        }
    }
});

이것은 효과가 있는 것 같습니다(단, *proper* 각도보다 현저하게 느리지만).JS 변수 바인딩)을 사용하는데 더 나은 방법이 있을 것 같습니다.누가 그 문제에 대해 좀 밝혀 줄 수 있나요?

왜 그런 짓을 하는지 모르겠군요$apply실제로 필요하지 않기 때문에 수동으로 방법을 지정합니다.

Angular 페이지에서 당신이 사용한 예를 편집하여 입력 내용을 포함시켰습니다.저는 http://jsfiddle.net/6HcGS/2/을 이용하실 수 있습니다.

HTML

<div ng-app="zippyModule">
  <div ng-controller="Ctrl3">
    Title: <input ng-model="title">
    <hr>
    <div class="zippy" zippy-title="title"></div>
  </div>
</div>​

JS

function Ctrl3($scope) {
  $scope.title = 'Lorem Ipsum';
}

angular.module('zippyModule', [])
  .directive('zippy', function(){
    return {
      restrict: 'C',
      replace: true,
      transclude: true,
      scope: { title:'=zippyTitle' },
      template: '<input type="text" value="{{title}}"style="width: 90%"/>',
      link: function(scope, element, attrs) {
        // Your controller
      }
    }
  });

UPDATE maxisam이 맞습니다.사용해야 합니다.ng-model변수를 다음과 같이 값에 바인딩하는 대신 다음과 같이 하십시오.

<input type="text" ng-model="title" style="width: 90%"/>

동작하는 버전은 다음과 같습니다.http://jsfiddle.net/6HcGS/3/

이런 거 말하는 거야?

기본적으로는 @Flek의 예를 사용합니다.
유일한 차이점은ng-model='title'

쌍방향 바인딩을 실시하기 위한 요령은 ng-model로, 문서에는 다음과 같이 기술되어 있습니다.

ngModel은 Angular에게 양방향 데이터 바인딩을 수행하도록 지시하는 명령어입니다.입력, 선택, 텍스트 영역과 함께 작동합니다.ngModel을 사용하기 위한 지시사항을 쉽게 작성할 수도 있습니다.

<input type="text" ng-model="title" style="width: 90%"/>

명령어로 콜백파라미터에 전달하는 방법을 다음에 나타냅니다.컨트롤러 템플릿:

    <component-paging-select-directive
            page-item-limit="{{pageItemLimit}}"
            page-change-handler="pageChangeHandler(paramPulledOutOffThinAir)"
            ></component-paging-select-directive>

지시사항은 다음과 같습니다.

angular.module('component')
    .directive('componentPagingSelectDirective', [
        function( ) {
            return {
                restrict: 'E',
                scope: { 
                    // using the '=' for two way doesn't work
                    pageItemLimit:  '@', // the '@' is one way from controller
                    pageChangeHandler: '&'
                },
                controller: function($scope) {   
                    // pass value from this scope to controller method. 
                    // controller method will update the var in controller scope
                    $scope.pageChangeHandler({
                        paramPulledOutOffThinAir: $scope.pageItemLimit
                    })

                }, ...

컨트롤러 내:

angular.module('...').controller(...
        $scope.pageItemLimit = 0; // initial value for controller scoped var

        // complete the data update by setting the var in controller scope 
        // to the one from the directive
        $scope.pageChangeHandler = function(paramPulledOutOffThinAir) {
            $scope.pageItemLimit = paramPulledOutOffThinAir;
        }

디렉티브의 함수 파라미터(파라미터가 키로 되어 있는 오브젝트), 템플릿('디렉티브의 파라미터 오브젝트에서 래핑 해제된' 키) 및 컨트롤러 정의의 차이를 확인합니다.

언급URL : https://stackoverflow.com/questions/13294507/two-way-data-binding-in-angularjs-directives