Two Way Data Binding In Angularjs Directives

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

Solution 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

<divng-app="zippyModule"><divng-controller="Ctrl3">
    Title: <inputng-model="title"><hr><divclass="zippy"zippy-title="title"></div></div></div>​

JS

functionCtrl3($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:

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

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

Solution 2:

You mean something like this ?

I basically use @Flek's example. The only difference being ng-model='title'

The trick to doing two-way binding is ng-model, and it states in the document:

ngModel is directive that tells Angular to do two-way data binding. It works together with input, select, textarea. You can easily write your own directives to use ngModel as well.

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

Solution 3:

Here's a way to pass to a callback parameter in a directive. The controller template:

    <component-paging-select-directive
            page-item-limit="{{pageItemLimit}}"
            page-change-handler="pageChangeHandler(paramPulledOutOffThinAir)"
            ></component-paging-select-directive>

The directive:

angular.module('component')
    .directive('componentPagingSelectDirective', [
        function() {
            return {
                restrict: 'E',
                scope: { 
                    // using the '=' for two way doesn't work
                    pageItemLimit:  '@', // the '@' is one way from controller
                    pageChangeHandler: '&'
                },
                controller: function($scope) {   
                    // pass value from this scope to controller method. // controller method will update the var in controller scope$scope.pageChangeHandler({
                        paramPulledOutOffThinAir: $scope.pageItemLimit
                    })

                }, ...

In the controller:

angular.module('...').controller(...
        $scope.pageItemLimit = 0; // initial value for controller scoped var// complete the data update by setting the var in controller scope // to the one from the directive$scope.pageChangeHandler = function(paramPulledOutOffThinAir) {
            $scope.pageItemLimit = paramPulledOutOffThinAir;
        }

Note the difference in function parameters for the directive (an object with parameter as keys), template ('unwrapped' keys from the parameter object in directive), and controller definition.