angular.js指令双向绑定范围更新

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

Answer 1

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.

Answer 2

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