답변:
ng-bind 에는 단방향 데이터 바인딩이 있습니다 ($ scope-> view). 변수 이름 인 html에 삽입 된 {{ val }}
범위 값을 표시 하는 바로 가기 가 있습니다.$scope.valval
ng-model 은 양식 요소 안에 배치되며 양방향 데이터 바인딩 ($ scope-> view and view-> $ scope)을 갖습니다 (예 :) <input ng-model="val"/>.
tosh 의 답변은 질문의 핵심에 잘 맞습니다. 다음은 몇 가지 추가 정보입니다.
ng-bind및 ng-model모두가 사용자를 출력하기 전에 데이터 변환의 개념을 갖는다. 이를 ng-bind위해 filters 를 ng-model사용하고 formatter 를 사용하십시오 .
으로는 ng-bind, 당신은 사용할 수있는 필터를 사용자의 데이터를 변환 할 수 있습니다. 예를 들어
<div ng-bind="mystring | uppercase"></div>,
또는 더 간단하게 :
<div>{{mystring | uppercase}}</div>
참고 uppercase내장되어 각 필터 , 당신은 또한 수 있지만 자신의 필터를 구축 .
ng-model 포맷터를 만들려면을 수행하는 지시문을 작성 require: 'ngModel'하면 해당 지시문이 ngModel 's에 액세스 할 수 있습니다 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것과 같습니다 .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또는 $formatters전화 기능을 ngModel 의 controller.$setValidity(validationErrorKey, isValid)기능 .
Angular 1.3에는 새로운 $ validators 배열 이있어$parsers또는대신에 유효성 검사에 사용할 수 있습니다$formatters.
이 지시문은 우선 순위 레벨 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은 다음을 담당합니다.
이 지시문은 우선 순위 레벨 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는 다음을 담당합니다.
ng- 모델
AngularJS의 ng-model 지시문은 응용 프로그램에 사용되는 변수를 입력 구성 요소와 바인딩하는 가장 큰 장점 중 하나입니다. 이것은 양방향 데이터 바인딩으로 작동합니다. 양방향 바인딩에 대해 더 잘 이해하려면 입력 컴포넌트가 있고 해당 필드로 업데이트 된 값이 애플리케이션의 다른 부분에 반영되어야합니다. 더 나은 솔루션은 변수를 해당 필드에 바인딩하고 응용 프로그램을 통해 업데이트 된 값을 표시하려는 경우 해당 변수를 출력하는 것입니다.
NG 바인드
ng-bind는 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>ng-bind를 사용 <p>하여 표시 할 수 있고 ng-bind {{model}},에 대한 단축키를 사용할 수 있으며 , ng-bind를 html 입력 컨트롤 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>