вызова функция контроллера, когда директива изменен атрибут

Question

Моего кода до сих пор:

.directive('ngSpreadsheet', function() { 
     return { 
      restrict: 'EA', 
      scope: { 
       curpart: '=' 
      }, 
      template: '<div id="dataTable" class="dataTable"></div>', 
      controller: SpreadsheetController, 
      link: function (scope, element, attrs) { 
       scope.$watch('curpart', function (val) { 
        console.log('curpart value changed, new value is: ' + val); 
        // here i want to call a function of the SpreadsheetController 
        // or is there a better way, executing stuff when an attribute changed? 
       }); 
      } 

     } 
    }) 


var SpreadsheetController = (function() { 
    ... 

    SpreadsheetController.prototype.curPartChanged = function() { 
     console.debug('curPartChanged'); 
    }; 
})(); 

Answer 1

Четвертый параметр к link функции является контроллером; Я бы рекомендовал получить доступ таким образом.

link: function (scope, element, attrs, controller){ 
    //... 
    controller.curPartChanged(...); 
    //... 
} 

Я не могу связать непосредственно с якоря, но look in this doc для секции на LINK. Вы можете найти «экземпляр контроллера, если хотя бы одна директива по элементу определяет контроллер», чтобы найти точный раздел.

EDIT:

Если вы хотите, чтобы наблюдать атрибут директивы, я хотел бы рассмотреть функцию $observe, которая очень похожа на $watch. Пойдите в this SO post, чтобы узнать больше.

Answer 2

Если вы хотите, чтобы получить ссылку на ваш контроллер в вашей директиве, то требуется собственная директива. См: http://jsfiddle.net/7LnrZ/22/

var mod = angular.module("myapp", []); 

mod.controller("SimpleCtrl", function ($scope) { 
    var part = {}; 
    part.curpart = 1; 

    $scope.part = part; 

    $scope.increasePart = function() { 
     part.curpart++; 
    } 
}); 

var SpreadsheetController = function() { 
    console.log("Instantiating SpreadsheetController");  
} 

SpreadsheetController.prototype.curPartChanged = function() { 
    console.log('curPartChanged'); 
} 

mod.directive("ngSpreadsheet", function ($window) { 
    return { 
     restrict: 'EA', 
     scope: { 
      curpart: '=' 
     }, 
     require: "ngSpreadsheet", 
     template: '<div id="dataTable" class="dataTable"></div>', 
     controller: SpreadsheetController, 
     link: function (scope, element, attrs, ctrl) { 
      scope.$watch('curpart', function (val) { 
       console.log('curpart value changed, new value is: ' + val); 
       ctrl.curPartChanged(); 
       }); 
      } 
    } 
}); 

Составление заказа на директиву:

• Директива контроллера называется/создано
• Directive функция предварительной ссылка вызывается
  • ребенка директиву (ы) контроллера директивы
  • Вызывается дочерняя директива (-а) директивы pre-link
  • Ребенок директивы (ы) директивы после ссылки вызывается
• Директива Функция пост-ссылка вызывается

Answer 3

Связь между директивой и контроллером, который хозяйничает его должно произойти через вызов события , scope.$emit отправит такое событие, а $scope.$on поймает события на другой стороне.

.directive('ngSpreadsheet', function() { 
    return { 
     restrict: 'EA', 
     scope: { 
      curpart: '=' 
     }, 
     template: '<div id="dataTable" class="dataTable"></div>', 

     controller: function($scope){ 
      $scope.$on('curpart.change',function(data){ 
      console.log('curpart changed.. the new value is: ',data); 
     }), 

     link: function (scope, element, attrs) { 
      scope.$watch('curpart', function (evt,val) { 
       console.log('curpart value changed, new value is: ' + val); 
       scope.$emit('curpart.change',val); 
      }); 
     }   
    } 
});