Respostas:
ng-bind possui ligação de dados unidirecional ($ scope -> view). Possui um atalho {{ val }}
que exibe o valor do escopo $scope.valinserido no html, em queval está o nome da variável.
O ng-model deve ser colocado dentro dos elementos do formulário e possui ligação de dados bidirecional ($ scope -> view e view -> $ scope), por exemplo <input ng-model="val"/>.
A resposta de Tosh chega ao cerne da questão. Aqui estão algumas informações adicionais ....
ng-binde ng-modelambos têm o conceito de transformar dados antes de enviá-los para o usuário. Para esse fim, ng-bindusa filtros , enquanto ng-modelusa formatadores .
Com ng-bind, você pode usar um filtro para transformar seus dados. Por exemplo,
<div ng-bind="mystring | uppercase"></div>,
ou mais simplesmente:
<div>{{mystring | uppercase}}</div>
Observe que uppercaseé um filtro angular interno , embora você também possa criar seu próprio filtro .
Para criar um formatador de ng-model, você cria uma diretiva que faz isso require: 'ngModel', o que permite que essa diretiva obtenha acesso aos ngModel controller. Por exemplo:
app.directive('myModelFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, controller) {
controller.$formatters.push(function(value) {
return value.toUpperCase();
});
}
}
}Então no seu parcial:
<input ngModel="mystring" my-model-formatter />Isso é essencialmente o ng-modelequivalente ao que o uppercase filtro está fazendo no ng-bindexemplo acima.
Agora, e se você planeja permitir que o usuário altere o valor de mystring? ng-bindsó tem ligação unidirecional, do modelo -> visualização . No entanto, ng-modelpode-se ligar da view -> model, o que significa que você pode permitir que o usuário altere os dados do modelo e, usando um analisador, pode formatar os dados do usuário de maneira simplificada. Aqui está o que parece:
app.directive('myModelFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, controller) {
controller.$parsers.push(function(value) {
return value.toLowerCase();
});
}
}
}Jogue com um plunker ao vivo dos exemplos do ng-modelformatador / analisador
ng-modeltambém possui validação embutida. Basta modificar o seu $parsersou $formattersfunção a ser chamada ngModel 's controller.$setValidity(validationErrorKey, isValid)função .
O Angular 1.3 possui uma nova matriz $ validators que você pode usar para validação em vez de$parsersou$formatters.
O Angular 1.3 também possui suporte a get / setter para o ngModel
Esta diretiva é executada no nível de prioridade 1.
Exemplo Plunker
JAVASCRIPT
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>O ngModel é responsável por:
Esta diretiva é executada no nível de prioridade 0.
Exemplo Plunker
JAVASCRIPT
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>O ngBind é responsável por:
Se você está hesitando em usar ng-bindou ng-model, tente responder a estas perguntas:
Você só precisa exibir dados?
Sim: ng-bind (ligação unidirecional)
Não: ng-model (ligação bidirecional)
Você precisa vincular o conteúdo do texto (e não o valor)?
Sim: ng-bind
Não: ng-model (você não deve usar ng-bind onde o valor for necessário)
Sua tag é um HTML
<input>?
Sim: ng-model (você não pode usar ng-bind com <input>tag)
Não: ng-bind
ng-model
A diretiva ng-model no AngularJS é uma das maiores forças para vincular as variáveis usadas no aplicativo com componentes de entrada. Isso funciona como ligação de dados bidirecional. Se você deseja entender melhor sobre as ligações bidirecionais, possui um componente de entrada e o valor atualizado nesse campo deve ser refletido em outra parte do aplicativo. A melhor solução é vincular uma variável a esse campo e gerar essa variável sempre que você desejar exibir o valor atualizado por meio do aplicativo.
ng-bind
O ng-bind funciona muito diferente do ng-model. ng-bind é uma forma de ligação de dados usada para exibir o valor dentro do componente html como HTML interno. Esta diretiva não pode ser usada para ligação com a variável, mas apenas com o conteúdo dos elementos HTML. De fato, isso pode ser usado junto com o ng-model para vincular o componente aos elementos HTML. Esta diretiva é muito útil para atualizar blocos como div, span, etc. com conteúdo HTML interno.
Este exemplo ajudaria você a entender.
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>Podemos usar ng-bind com <p>para exibir, podemos usar atalho para ng-bind {{model}}, não podemos usar ng-bind com controles de entrada html, mas podemos usar atalho para ng-bind {{model}}com controles de entrada 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>