Angularjs пользовательские директивы два способа связывания не работает

Question

создать пользовательские директивы и используя два способа связывания (=)

Но я хочу, чтобы следить за изменениями в контроллере при изменении модели в директиве.

<div ng-app="zippyModule"> 
    <div ng-controller="Ctrl3"> 
    Title: <input ng-model="title"> 
    <hr> 
    <div class="zippy" zippy-title="title" ff="titleChanged()"></div> 
    </div> 
</div> 


function Ctrl3($scope) { 
    $scope.title = 'Lorem Ipsum'; 
    $scope.titleChanged = function() { 
     //ALERT COMMING WITH OLD VALUE NOT UPDATED 
     alert($scope.title); 
    } 
} 

angular.module('zippyModule', []) 
    .directive('zippy', function(){ 
    return { 
     restrict: 'C', 
     replace: true, 
     scope: { title:'=zippyTitle',f:'&ff' }, 
     template: '<input type="text" value="{{title}}"style="width: 90%" ng-click="onclick()"/>', 
     link: function(scope, element, attrs) { 
     // Your controller 
      scope.onclick = function() { 
       scope.title +="_"; 
       if (scope.$root.$$phase != '$apply' && scope.$root.$$phase != '$digest') { 
        scope.$apply(); 
       } 
       scope.f(); 

      } 
     } 
    } 
    }); 

titleChanged метод вызывает, но $ scope.title отправляется со старым значением. если удалить

if (scope.$root.$$phase != '$apply' && scope.$root.$$phase != '$digest') { 

это если и вызвать direcly сфера. $ Применять() метод,

Наносить за исключением прогресса бросает.

Answer 1

Как сказал @Omri выше, вы должны поместить свои значения модели внутри объекта в область видимости вместо того, чтобы иметь строки непосредственно в области.

Однако, вы, вероятно, хотите просто использовать нг-модель для обработки отслеживания изменений модели:

angular.module('zippyModule', []) 
     .controller('Ctrl3', function($scope) { 
     $scope.model = {title : 'Lorem Ipsum'}; 
     $scope.titleChanged = function() { 
      //ALERT COMMING WITH OLD VALUE NOT UPDATED 
      alert($scope.model.title); 
     } 
     }) 
     .directive('zippy', function(){ 
     return { 
      restrict: 'C', 
      replace: true, 
      scope: {f:'&ff' }, 
      require: 'ngModel', 
      template: '<input type="text" style="width: 90%" ng-click="onclick()"/>', 
      link: function(scope, element, attrs, ctrl) { 
      // Use ngModelController 
       ctrl.$render = function() { 
       element.val(ctrl.$modelValue); 
       }; 
       scope.onclick = function() { 
       var newVal = ctrl.$modelValue + '_'; 
       element.val(newVal); 
       ctrl.$setViewValue(newVal); 
       scope.f(); 
       } 
      } 
     } 
     }); 

Затем обновите ваш HTML, чтобы использовать нг-модель:

<div ng-app="zippyModule"> 
     <div ng-controller="Ctrl3"> 
     Title: <input ng-model="model.title"> 
     <hr> 
     <div class="zippy" zippy-title ng-model="model.title" ff="titleChanged()"> 
     </div> 
     </div> 
    </div> 

Fiddle: https://jsfiddle.net/sLx9do3c/

Ознакомьтесь с документами для ngModelController для всех других функций, которые вам, вероятно, понадобятся. https://docs.angularjs.org/api/ng/type/ngModel.NgModelController