데이터 바인딩을 위해 NgModelController를 사용하는 AngularJS 실습

머리말

Angular 애플리케이션에서 ng-model 지시문은 뷰를 데이터에 바인딩하는 데 사용되는 필수 부분이며 양방향 바인딩 마법의 중요한 부분입니다. ngModelController는 ng-model 지시문에 정의된 컨트롤러입니다. 이 컨트롤러에는 데이터 바인딩, 유효성 검사, CSS 업데이트, 값 형식 지정 및 구문 분석을 위한 서비스가 포함되어 있습니다. DOM 렌더링이나 DOM 이벤트 수신에는 사용되지 않습니다. DOM 관련 로직은 다른 명령어에 포함되어야 하며, 그런 다음 이러한 명령어가 ngModelController의 데이터 바인딩 기능을 시도하도록 해야 합니다.

참고: 이 문서는 NgModelController 문서에 대한 설명이 아니지만 더 실용적입니다. 다음으로, 사용자 지정 명령을 구현하고 ng-model 속성을 사용하여 양쪽에서 데이터를 바인딩하는 전체 프로세스를 안내하겠습니다.

예

우리 앱은 다음과 같이 timeDruation

이라는 사용자 정의 지시어를 사용합니다

<div ng-app="HelloApp" ng-controller="HelloController">
 <h1>自定义指令</h1>
 <time-duration ng-model="test"></time-duration>
 <h1>默认指令</h1>
 <input ng-model="test">second
</div>

JS 코드는

angular.module('HelloApp', [])
 .directive('timeDuration', TimeDurationDirective);
 .controller('HelloController', function($scope) {
 $scope.test = 1;
 });

과 같으며, 공통적으로 사용되는 여러 시간 단위를 지정하고 데이터를 입력할 수 있습니다. 마지막으로 해당하는 초 수를 얻습니다. 해당 기능의 스크린샷은 다음과 같습니다.

여기서 테스트 변수를 사용자 정의 명령어와 기본 명령어에 각각 바인딩하여 그 효과를 관찰합니다.

맞춤 지침

더 이상 고민하지 말고 코드를 살펴보겠습니다

먼저 지침의 템플릿을 살펴보겠습니다. 위 그림에서 볼 수 있듯이 명령에는 입력 상자와 드롭다운 선택 상자가 포함되어 있습니다.

<div class="time-duration">
 <input ng-model=&#39;num&#39;>
 <select ng-model=&#39;unit&#39;>
 <option value="seconds">Seconds</option>
 <option value="minutes">Minutes</option>
 <option value="hours">Hours</option>
 <option value="days">Days</option>
 </select>
</div>

템플릿은 사실 매우 간단하므로 여기서는 자세히 설명하지 않겠습니다. 이 명령어의 논리적인 부분을 살펴보겠습니다.

function TimeDurationDirective() {
 var tpl = '....'; // 指令模板代码就是上面的内容，这里就不复制了。
  
 return {
 restrict: 'E',
 replace: true,
 template: tpl,
 require: 'ngModel',
 scope: {},
 link: function(scope, element, attrs, ngModelController) {
  var multiplierMap = {
  seconds: 1,
  minutes: 60,
  hours: 3600,
  days: 86400
  };
  var multiplierTypes = ['seconds', 'minutes', 'hours', 'days'];
 
  // TODO
 }
 };
}

임시로 명령어의 링크 방식을 TODO합니다. 추후 점차 개선될 예정입니다.

먼저 require 문을 사용하는 이 지시어의 정의를 살펴보겠습니다. 간단히 말해서, require의 기능은 이 지시문에 대한 종속 관계를 선언하여 이 지시문이 다른 지시문의 컨트롤러 속성에 의존함을 나타내는 것입니다.

require의 파생 사용법에 대한 간략한 설명은 다음과 같습니다.

require 앞에 수사적 수량자를 추가할 수 있습니다(예:

return {
 require: '^ngModel'
}
 
return {
 require: '?ngModel'
}
 
return {
 require: '?^ngModel'
}

1. ^ 접두사 수정은 검색을 나타냄). is allowed 현재 지시어의 상위 지시어입니다. 해당 지시어에 대한 컨트롤러를 찾을 수 없으면 오류가 발생합니다.

2. ?는 이 필수 작업을 옵션으로 바꾸는 것을 의미합니다. 즉, 해당 명령에 대한 컨트롤러를 찾을 수 없는 경우 오류가 발생하지 않습니다.

3. 물론 이 두 가지 접두사 수정을 조합하여 사용할 수도 있습니다.

?ngModel에 비해 ^ngModel을 더 자주 사용합니다.

예를 들어

<my-directive ng-model="my-model">
 <other-directive></other-directive>
</my-directive>

이때 other-directive에서는 require: ^ngModel을 사용합니다. 자동으로 my-directive 선언에서 컨트롤러 속성을 찾으세요.

NgModelController 사용

require: 'ngModel'을 선언하면 네 번째 매개변수가 링크 메서드에 삽입됩니다. 다음은 내장 명령어 ngModel의 컨트롤러 ngModeController입니다.

link: function (scope, element, attrs, ngModelCtrl) {
 // TODO
}

$viewValue 및 $modelValue

ngModelController에는 두 가지 매우 중요한 속성이 있습니다. 하나는 $viewValue라고 하고 하나는 $modeValue라고 합니다.

이 둘의 의미에 대한 공식적인 설명은 다음과 같습니다

$viewValue: 뷰에 있는 실제 문자열 값입니다.

$modelValue: 뷰에 있는 값입니다.

위의 공식적인 설명에 대해 의문이 있으신 경우 여기에서 개인적인 설명을 드리겠습니다.

$viewView는 템플릿을 렌더링하는 명령어에 사용되는 값이고, $modelView는 컨트롤러에서 순환되는 값입니다. 많은 경우 이 두 값은 다를 수 있습니다.

예를 들어 페이지에 날짜를 표시하는 경우 "2015년 10월 20일"과 같은 문자열이 표시될 수 있지만 컨트롤러에서 이 문자열에 해당하는 값은 Javascript일 수 있습니다. Date 객체의 인스턴스 .

또 다른 예를 들어, 기간 예에서 $viewValue는 실제로 명령 템플릿의 num 및 단위와 결합된 값을 참조하는 반면, $modelValue는 HelloAppController의 테스트 변수에 해당하는 값입니다.

$formatters 및 $parses

$viewValue 및 $modelValue 두 속성 외에도 이를 처리하는 두 가지 방법이 있습니다. 이들은 각각 $parses와 $formatters입니다.

전자는 $viewValue->$modelValue를 변경하는 것이고 후자는 정반대로 $modelValue->$viewValue를 변경하는 것입니다.

지속시간 명령과 외부 컨트롤러 및 내부 동작은 아래와 같습니다.

     1、在外部控制器中（即这里的HelloApp的controller），我们通过ng-model="test"将test变量传入指令time-duration中，并建立绑定关系。

     2、在指令内部，$modelValue其实就是test值的一份拷贝。

     3、我们通过$formatters()方法将$modelValue转变成$viewValue。

     4、然后调用$render()方法将$viewValue渲染到directive template中。

     5、当我们通过某种途径监控到指令模板中的变量发生变化之后，我们调用$setViewValue()来更新$viewValue。

     6、与（4）相对应，我们通过$parsers方法将$viewValue转化成$modelValue。

     7、当$modelValue发生变化后，则会去更新HelloApp的UI。

完善指令逻辑

按照上面的流程，我们先来将$modelValue转化成$viewValue，然后在指令模板中进行渲染。

// $formatters接受一个数组
// 数组是一系列方法，用于将modelValue转化成viewValue
ngModelController.$formatters.push(function(modelValue) {
 var unit = 'minutes', num = 0, i, unitName;
 modelValue = parseInt(modelValue || 0);
  
 for (i = multiplierTypes.length-1; i >= 0; i--) {
 unitName = multiplierTypes[i];
 
 if (modelValue % multiplierMap[unitName] === 0) {
  unit = unitName;
  break;
 }
 }
  
 if (modelValue) {
 num = modelValue / multiplierMap[unit];
 }
 
 return {
 unit: unit,
 num: num
 };
});

   

最后返回的对象就是$viewValue的value。（当然$viewValue还会有其他的一些属性。）

第二步，我们调用$render方法将$viewValue渲染到指令模板中去。

// $render用于将viewValue渲染到指令的模板中
ngModelController.$render = function() {
 scope.unit = ngModelCtrl.$viewValue.unit;
 scope.num = ngModelCtrl.$viewValue.num;
};

   

第三步，我们通过$watch来监控指令模板中num和unit变量。当其发生变化时，我们需要更新$viewValue。

scope.$watch('unit + num', function() {
// $setViewValue用于更新viewValue
 ngModelController.$setViewValue({
 unit: scope.unit,
 num: scope.num
 });
});

   

第四步，我们通过$parsers将$viewValue->$modelValue。

// $parsers接受一个数组
// 数组是一系列方法，用于将viewValue转化成modelValue
ngModelController.$parsers.push(function(viewValue) {
 var unit = viewValue.unit；
 var num = viewValue.num;
 var multiplier;
 
 multiplier = multiplierMap[unit];
 
 return num * multiplier;
});

   

更多데이터 바인딩을 위해 NgModelController를 사용하는 AngularJS 실습相关文章请关注PHP中文网！