angular.js директива смены двухсторонней привязки

Question

Я хотел использовать директиву, чтобы иметь некоторые функциональные возможности для редактирования в моем интерфейсе. Это директива Я использую для этого: 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(); 
     }; 
     } 
    }; 
    }); 

Я добавил второй атрибут директивы, чтобы вызвать метод после, когда пользователь изменяет значение, а затем обновить базу данных и т.д. Метод ('$ onSave здесь) называется прекрасным, но кажется, что родительская область еще не обновлена, когда я вызываю метод в конце директивы. Есть ли способ вызвать метод, но родительская область обновлена ​​точно?

Спасибо заранее, Майкл

Answer 1

Я считаю, что вы должны создать функции для крепления внутри функции связующей:

Взгляните на этот код:
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(); 
     }; 
     } 
    }; 
    }); 

Я еще не объявлял функции внутри контроллера, но я не понимаю, почему это не сработает.

Хотя этот вопрос/ответ объяснить это Link vs compile vs controller

Из моего понимания:
Контроллер используется для обмена данными между экземплярами директивы, а не к «ссылке» функции, которые будут выполняться в качестве обратных вызовов.

Answer 2

Метод вызывается, но угловой не понимает, что ему необходимо запустить цикл дайджеста, чтобы обновить область управления. К счастью, вы все равно можете вызвать дайджест изнутри области выделения, просто заверните вызов метода:

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