Two Way Data Binding In Angularjs Directives
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.
Post a Comment for "Two Way Data Binding In Angularjs Directives"