Two way data binding in AngularJS Directives

Question

I have been trying to define directives so I can display different "widgets" in a form, depending on the type of field and its parameters, which are stored in a database. I need to react to different types of scenarios, hence the need for directives to handle layout.

While playing with a few examples, I came up with a code that *kinda* works:

HTML

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

Directive

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();             }         }     } }); 

This seems to works (albeit noticeably slower than a *proper* angularJS variable binding) but I figure there must be a better way to do this. Can anyone shed some light on the matter?

Answer 1

I don't know why you are triggering the $apply method manually because you actually don't need it.

I edited the example you used from the Angular page and included the input. It works for me: 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 is right, you have to use ng-model instead of binding the variable against the value like so:

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

Here is the working version: http://jsfiddle.net/6HcGS/3/