ng-model과 ng-bind의 차이점은 무엇입니까?

ng-model과 ng-bind의 차이점은 무엇입니까?

저는 현재 Angular를 배우고 있습니다.와 JS의 하는 데 을 겪고 .ng-bind그리고.ng-model.

누가 그것들이 어떻게 다른지 그리고 언제 다른 것들보다 더 사용되어야 하는지 말해줄 수 있습니까?

ng-binding은 단방향 데이터 바인딩($scope --> view)을 가지고 있습니다.바로 가기가 있습니다.{{ val }}이것은 값을 합니다.$scope.val됩니다. 여기서 html은 입된입니다.val변수 이름입니다.

ng-model은 폼 요소 안에 넣도록 고안되었으며 양방향 데이터 바인딩($scope --> view and view --> $scope)을 가지고 있습니다.<input ng-model="val"/>.

토시의 대답은 질문의 핵심에 잘 도달합니다.여기 추가 정보가 있습니다...

필터 & 포맷터

ng-bind그리고.ng-model둘 다 사용자를 위해 데이터를 출력하기 전에 변환하는 개념을 가지고 있습니다.위해, 이를위해,해,ng-bind필터 사용, 반면ng-model형식을 사용합니다.

필터(ng-filter)

와 함께ng-bind필터를 사용하여 데이터를 변환할 수 있습니다.예를들면,

<div ng-bind="mystring | uppercase"></div>,

또는 더 간단하게:

<div>{{mystring | uppercase}}</div>

내장된 각도 필터이지만 자체 필터를 만들 수도 있습니다.

포맷터(ng-model)

포맷터를 ng-model 포맷터를 .require: 'ngModel'사용하면 의 그지ngModels 세스있합니다에 수 .controller예:

app.directive('myModelFormatter', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, controller) {
     controller.$formatters.push(function(value) {
        return value.toUpperCase();
      });
    }
  }
}

그렇다면 당신의 편에서:

<input ngModel="mystring" my-model-formatter />

으로 이은본으로적질입니다.ng-model▁▁of▁whatent것▁equival에 상당하는 것uppercase 필터가 실행 중입니다.ng-bind위의 예

---

파서

사용자가 다음 값을 변경할 수 있도록 하려면 어떻게 해야 합니까?mystring?ng-bind모델--> 보기에서 바인딩은 한 가지 방법만 있습니다.하지만,ng-model뷰에서 바인딩할 수 있습니다. --> 모델은 사용자가 모델의 데이터를 변경할 수 있도록 허용할 수 있으며, 파서를 사용하면 사용자의 데이터를 간소화된 방식으로 포맷할 수 있습니다.이것은 다음과 같습니다.

app.directive('myModelFormatter', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, controller) {
     controller.$parsers.push(function(value) {
        return value.toLowerCase();
      });
    }
  }
}

---

라이브 플러커와 함께 플레이합니다.ng-model

---

물론이지.

ng-model또한 유효성 검사 기능이 내장되어 있습니다.간단히 수정할 수 있습니다.$parsers또는$formattersngModel의 함수를 호출하는 함수입니다.

Angular 1.3에는 새로운 $validators 배열이 있으며, 이 배열을 사용하여 검증할 수 있습니다.$parsers또는$formatters.

Angular 1.3은 ngModel에 대한 getter/setter 지원도 제공합니다.

ng모델

The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope.

이 지침은 우선 순위 수준 1에서 실행됩니다.

플런커 예제

자바스크립트

angular.module('inputExample', [])
   .controller('ExampleController', ['$scope', function($scope) {
     $scope.val = '1';
}]);

CSS

.my-input {
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
    background: transparent;
}
.my-input.ng-invalid {
    color:white;
    background: red;
}

HTML

<p id="inputDescription">
   Update input to see transitions when valid/invalid.
   Integer is a valid value.
</p>
<form name="testForm" ng-controller="ExampleController">
    <input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input"
         aria-describedby="inputDescription" />
</form>

ngModel은 다음을 담당합니다.

• 입력, 텍스트 영역 또는 선택과 같은 다른 지시어가 필요로 하는 모델에 뷰를 바인딩합니다.
• 유효성 검사 동작(예: 필수, 번호, 전자 메일, URL)을 제공합니다.
• 컨트롤 상태 유지(유효/잘못됨, 더러움/청결함, 터치됨/미접촉, 유효성 검사 오류)
• 애니메이션을 포함한 요소(ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched)에 관련 CSS 클래스 설정.
• 컨트롤을 상위 양식에 등록합니다.

ngBind

The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.

이 지시어는 우선 순위 수준 0에서 실행됩니다.

플런커 예제

자바스크립트

angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
    $scope.name = 'Whirled';
}]);

HTML

<div ng-controller="ExampleController">
  <label>Enter name: <input type="text" ng-model="name"></label><br>
  Hello <span ng-bind="name"></span>!
</div>

ngBind는 다음을 담당합니다.

• 지정된 HTML 요소의 텍스트 내용을 지정된 식의 값으로 바꿉니다.

또는 사용을 망설이는 경우 다음 질문에 답하십시오.

---

데이터만 표시하면 됩니까?

• 예:ng-bind 바인딩단방향 바인딩)

• 아니요:ng-model 바인딩2방향 바인딩)

값이 아닌 텍스트 내용을 바인딩해야 합니까?

• 예:ng-bind

• 아니요:ng-model 하면 안

당신의 태그는 HTML입니까?

• 예:ng-model (ng-dll을 함께 사용할 수 없습니다.<input>태그)

• 아니요:ng-bind

ng-모형의

각도의 ng-모델 지시문JS는 응용 프로그램에서 사용되는 변수를 입력 구성 요소와 결합할 수 있는 가장 큰 강점 중 하나입니다.이는 양방향 데이터 바인딩으로 작동합니다.양방향 바인딩을 더 잘 이해하려면 입력 구성 요소가 있고 해당 필드에 업데이트된 값은 응용프로그램의 다른 부분에 반영되어야 합니다.더 나은 해결책은 변수를 해당 필드에 바인딩하고 응용 프로그램을 통해 업데이트된 값을 표시할 때마다 해당 변수를 출력하는 것입니다.

ng-매개성의

ng-model과 ng-model은 매우 다르게 작동합니다.ng-bind는 HTML 구성 요소 내부의 값을 내부 HTML로 표시하는 데 사용되는 한 방향 데이터 바인딩입니다.이 지시어는 변수와의 바인딩에는 사용할 수 없고 HTML 요소 컨텐츠에만 사용할 수 있습니다.실제로 구성 요소를 HTML 요소에 바인딩하기 위해 ng-model과 함께 사용할 수 있습니다.이 지침은 내부 HTML 콘텐츠로 div, span 등의 블록을 업데이트하는 데 매우 유용합니다.

이 예는 이해하는 데 도움이 될 것입니다.

angular.module('testApp',[]).controller('testCTRL',function($scope)
                               
{
  
$scope.testingModel = "This is ModelData.If you change textbox data it will reflected here..because model is two way binding reflected in both.";
$scope.testingBind = "This is BindData.You can't change this beacause it is binded with html..In above textBox i tried to use bind, but it is not working because it is one way binding.";            
});

div input{
width:600px;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<head>Diff b/w model and bind</head>
<body data-ng-app="testApp">
    <div data-ng-controller="testCTRL">
        Model-Data : <input type="text" data-ng-model="testingModel">
        <p>{{testingModel}}</p>
          <input type="text" data-ng-bind="testingBind">
          <p ng-bind="testingBind"></p>
    </div>
</body>

ngModel은 보통 변수 바인드를 위한 입력 태그에 사용합니다. 변수는 컨트롤러와 html 페이지에서 변경할 수 있지만 ngBind는 변수를 html 페이지에 표시하기 위해 사용하고 변수는 컨트롤러에서만 변경할 수 있습니다. html에서 변경할 수 있습니다.

ng-bind를 사용할 수 있습니다.<p>표시하기 위해 바로 가기를 사용할 수 있습니다.ng-bind {{model}}우리는 html 입력 컨트롤과 함께 ng-dll을 사용할 수 없지만, 바로 가기를 사용할 수 있습니다.ng-bind {{model}}HTML 입력 컨트롤을 사용합니다.

<input type="text" ng-model="name" placeholder="Enter Something"/>
<input type="text" value="{{name}}" placeholder="Enter Something"/>
  Hello {{name}}
<p ng-bind="name"</p>

언급URL : https://stackoverflow.com/questions/12419619/whats-the-difference-between-ng-model-and-ng-bind