1

I have an Angular directive, which displays account details for a user to be able to amend and update. I'm using the link function in the directive to fire some javascript after the directive is rendered.

My problem is when the value's in the input is amended by the user, the base model directiveShippingAccount doesn't reflect the updates.

How do I bind any updates back to the directiveShippingAccount model, so that I can save the updated values?

Below is the directive in the main HTML page

<account-wizard directive-shipping-account="shippingAccount"
                        directive-bind-account-directive="bindAccountDirective()"
                        directive-save-shipping-account="saveShippingAccount(a)">
</account-wizard>

Below is a snippet from my HTML template for the account-wizard directive

<div class="row">
    <h2>Please enter your details below</h2>
    <div class="col-lg-4 col-lg-offset-4 ">
    <input type="text" class="text-center form-control required" ng-model="directiveShippingAccount.CollectionAddress.company" placeholder="Company name" value="{{directiveShippingAccount.company}}" />
        <input type="text" class="text-center form-control required" ng-model="directiveShippingAccount.ShippingAccountNumber" placeholder="Royal Mail Account Number" value="{{directiveShippingAccount.ShippingAccountNumber}}" />
        <input type="text" class="text-center form-control required" ng-model="directiveShippingAccount.AllowedNDCodes" placeholder="Service Codes" value="{{directiveShippingAccount.AllowedNDCodes}}" />
    </div>
</div>

Here is the directive itself

labulo.directive('accountWizard', function ($timeout) {
    return {
        templateUrl: '../Scripts/angular/directives/templates/AccountWizard.html',
        replace: true,
        scope: {
            directiveShippingAccount: "=",
            directiveBindAccountDirective: "&",
            directiveSaveShippingAccount: "&"
        },
        link: function (scope, elem, attr) {
            $timeout(function () {
                scope.directiveBindAccountDirective();
            });
        }
    }
});
Zuby
  • 41
  • 4
  • You can access controller scope value using $parent. Like this, in directive, you can do something like $scope.$parent.someModel to update value in controller – Muhammed Neswine Apr 01 '17 at 19:02
  • There must be an Angular way to do 2-way data binding though? – Zuby Apr 01 '17 at 19:11
  • have you tried to use a watcher? – Oliver F. Apr 01 '17 at 19:26
  • Not sure how to implement a watcher properly. I think it's something to do with `directiveBindAccountDirective()` which breaks the 2-way binding. This function basically fires the jQuery steps wizard on the form, but if I comment it out the 2-way bind seems to work – Zuby Apr 01 '17 at 19:31

0 Answers0