2017-02-23 44 views
0

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

У меня есть приложение, в котором во многих случаях будет отображаться адрес. Этот адрес должен быть доступен для редактирования во многих случаях. Поэтому я создал директиву.

Моя директива

app.directive('addressview', function(medipracticeData) { 
    return { 
     restrict: 'E', 
     templateUrl: 'address-view.html', 
     replace : true, 
     scope : { 
      address : '=', 
      editAddress : '&?' 
     }, 
     controller : function($scope){ 
      $scope.edit = function(){ 
       $scope.editAddress({ address : $scope.address }); 
      } 
     } 
    }; 
}); 

Мой шаблон директива (адрес-view.html)

<div ng-controller="AddressController as AddressCtrl"> 
    <addressview 
     address="OfficeCtrl.office.address" 
     edit-address="AddressCtrl.showAddressEdit(address)"> 
    </addressview> 
</div> 

Как вы можете видеть, я передаю функцию AddressCtrl.showAddressEdit() в каждой директиве .. Это функция в моем контроллере адресов, которая вызывает всплывающее окно, в котором я могу редактировать адрес.

Мой контроллер

app.controller("AddressController", AddressController); 

AddressController.$inject = ["$scope"]; 

function AddressController($scope) { 

    var avm = this; 
     avm.showAddressEdit = showAddressEdit; 

    function showAddressEdit(address) { 
     console.log(address); 
    } 
} 

Мой вопрос

Я пытаюсь избежать передачи этой функции AddressCtrl.showAddressEdit() в моей директиве все время. Можно ли использовать эту функцию внутри моего контрольного контроллера? Так что каждый раз, когда я использую эту директиву, он будет использоваться следующим образом:

<div ng-controller="AddressController as AddressCtrl"> 
    <addressview 
     address="OfficeCtrl.office.address"> 
    </addressview> 
</div> 
+0

Unrelated на ваш вопрос, но 2 вещи: вы используете 'заменить: true' атрибут, который устарел. Не используйте его больше. В какой угловой версии вы работаете? Кроме того, вы можете использовать компонент вместо директивы, проверьте его: [components] (https://docs.angularjs.org/guide/component) –

+0

Кроме того, пожалуйста [не используйте ng-controller в своем html ] (https://teropa.info/blog/2014/10/24/how-ive-improved-my-angular-apps-by-banning-ng-controller.html) и не использовать область действия, а скорее используйте синтаксис 'controllerAs', если вы хотите улучшить свой код –

ответ

1

Вы можете использовать службу, как этот

angular.module("myModule").service("myService", function(){ 
    return { 
     showAddressEdit: function(address) { 
      console.log(address); 
     } 
    }; 
}); 

Затем, вы можете вводить его в контроллер в директиве/компонент, как это:

// ... 
controller : function($scope, myService){ 
     $scope.edit = function(){ 
      $scope.editAddress({ address : $scope.address }); 
     } 

     $scope.showAdressEdit = myService.showAdressEdit; 
}