angular.js directive two-way-binding scope updating

Question

I wanted to use a directive to have some click-to-edit functionality in my front end. This is the directive I am using for that: http://icelab.com.au/articles/levelling-up-with-angularjs-building-a-reusable-click-to-edit-directive/

'use strict';

angular.module('jayMapApp')
  .directive('clickToEdit', function () {
    return {
      templateUrl: 'directives/clickToEdit/clickToEdit.html',
      restrict: 'A',
      replace: true,
      scope: {
        value: '=clickToEdit',
        method: '&onSave'
      },
      controller: function($scope, $attrs) {
        $scope.view = {
          editableValue: $scope.value,
          editorEnabled: false
        };

        $scope.enableEditor = function() {
          $scope.view.editorEnabled = true;
          $scope.view.editableValue = $scope.value;
        };

        $scope.disableEditor = function() {
          $scope.view.editorEnabled = false;
        };

        $scope.save = function() {
          $scope.value = $scope.view.editableValue;
          $scope.disableEditor();
          $scope.method();
        };
      }
    };
  });

I added a second attribute to the directive to call a method after when the user changed the value and then update the database etc. The method (´$onSave´ here) is called fine, but it seems the parent scope is not yet updated when I call the method at the end of the directive. Is there a way to call the method but have the parent scope updated for sure?

Thanks in advance, Michael

try adding the method under the link function rather than in the controller. It should work. also, can you show your HTML? — SoluableNonagon, Nov 12 '14 at 16:06

score 0 · Answer 1 · edited May 23 '17 at 10:26

I believe you are supposed to create the functions to attach inside the linking function:

Take a look at this code:
http://plnkr.co/edit/ZTx0xrOoQF3i93buJ279?p=preview

app.directive('clickToEdit', function () {
    return {
      templateUrl: 'clickToEdit.html',
      restrict: 'A',
      replace: true,
      scope: {
        value: '=clickToEdit',
        method: '&onSave'
      },
      link: function(scope, element, attrs){
        scope.save = function(){
          console.log('save in link fired');
        }
      },
      controller: function($scope, $attrs) { 
        $scope.view = {
          editableValue: $scope.value,
          editorEnabled: false
        };

        $scope.enableEditor = function() {
          $scope.view.editorEnabled = true;
          $scope.view.editableValue = $scope.value;
        };

        $scope.disableEditor = function() {
          $scope.view.editorEnabled = false;
        };

        $scope.save = function() {
          console.log('save in controller fired');
          $scope.value = $scope.view.editableValue;
          $scope.disableEditor();
          $scope.method();
        };
      }
    };
  });

I haven't declared the functions inside the controller before, but I don't see why it wouldn't work.

Though this question/answer explain it Link vs compile vs controller

From my understanding:
The controller is used to share data between directive instances, not to "link" functions which would be run as callbacks.

I dont't know if I understand you correctly but I want have the logic to save inside the controller and not the directive. How does your ´scope.save´ function does that? — Kageetai, Nov 12 '14 at 18:22

score 0 · Answer 2 · answered Nov 12 '14 at 16:55

0

The method is being called but angular doesn't realise it needs to run the digest cycle to update the controller scope. Luckily you can still trigger the digest from inside your isolate scope just wrap the call to the method:

$scope.$apply($scope.method());

answered Nov 12 '14 at 16:55

Cathal

1,740
18
31

There I just get a ´$apply already in progress´. I noticd that the digest cycle is running and other templates in the view get updated but this method seems to be run to early. – Kageetai Nov 12 '14 at 18:19

angular.js directive two-way-binding scope updating

2 Answers2