Угловая директива: какова разница между областью действия в контроллере и областью действия в функции связи?

Question

Я узнаю об Угловом directive и не могу обмотать голову вокруг темы scope. Предположим, у меня есть этот обычай directive, который называется parentDirective. Он имеет controller свойство и link свойства, а именно:

angular.module("app").directive("parentDirective", function() { 
    return { 
     restrict: "E", 
     templateUrl: "dirs/parent.html", 
     scope:{ 
      character: "=" 
     }, 
     controller: function ($scope) { 
      $scope.getData = function (data) { 
       console.log(data); 
      } 
     }, 
     link: function (scope,elem, attrs) { 
      elem.bind("click", function (e) { 
       //get object here? 
      }); 
      scope.getData = function (data) { 
       console.log(data); 
      } 
     } 
    } 
}); 

Его шаблон определяются следующим образом:

<p ng-click="getData(character)"> 
    {{character.name}} 
</p> 

я могу получить character объект в функции controller через $scope переменных и I имеют доступ к тем же данным в функции link через scope. В чем разница между этими двумя методами в этом отношении? Второй вопрос, можно ли связать click к directive и получить объект, как это:

elem.bind("click", function (e) { 
     //get object here? 
    }); 

Answer 1

Scope является специфичным для текущей директивы, например, и тот же объект в обеих функциях.

Для определения методов в области видимости нет различий, если они определены в функции контроллера или ссылки, если нет условия гонки, для чего требуется, чтобы метод определялся как можно раньше. По этой причине имеет смысл определить методы области в контроллере.

обработчик события не отличается от любой другой функции, это

elem.on("click", function (e) { 
    scope.$apply(function() { 
    scope.character... 
    }); 
}); 

scope.$apply(...) обертка не повредит в любом случае, но необходимость этого зависит от того, что происходит с scope.character.

Директива может содержать только controller и не link. Текущие угловые версии (1.5+) предлагают стиль, в котором вместо scope используются привязки в качестве общей основы для директив и компонентов.

Тогда директива может выглядеть

restrict: "E", 
template: '<p>{{$ctrl.character.name}}</p>', 
controllerAs: '$ctrl', 
bindToController: { character: "=" }, 
controller: function ($element, $scope) { 
    var self = this; 

    self.getData = function (data) { ... }; 

    $element.on("click", function (e) { 
     scope.$apply(function() { 
      self.character... 
     }); 
    }); 
} 

link функция может выглядеть как $postLink controller hook, но здесь он не нужен.