Привязка метода контроллера к его родительскому объекту $ scope

Question

Я объясню, что именно я пытаюсь сделать, прежде чем объяснять проблему. У меня есть Директива, которая содержит форму, и мне нужно получить доступ к этой форме из родительского элемента (где используется Директива) при нажатии кнопки отправки, чтобы проверить, что форма действительна.

Для этого я пытаюсь использовать $scope.$parent[$attrs.directiveName] = this;, а затем привязывая некоторые методы к Директиве, такие как this.isValid, которые будут отображаться и исполняться в родительском.

Это нормально работает при запуске локально, но когда вы меняете и создаете мой код (Yeoman angular-fullstack), я получаю сообщение об ошибке aProvider, о котором я проследил до ошибки $scopeProvider в контроллере.

У меня были аналогичные проблемы в прошлом, и моя первая мысль заключалась в том, что мне нужно конкретно указать $inject для $scope, чтобы имя не было потеряно. Но увы ..... не повезло.

Является ли что-то очевидным, что я делаю неправильно?

Любая помощь приветствуется.

(function() { 
    'use strict'; 

    angular 
    .module('myApp') 
    .directive('formDirective', formDirective); 

    function formDirective() { 
     var directive = { 
     templateUrl: 'path/to/template.html', 
     restrict: 'EA', 
     scope: { 
      user: '=' 
     }, 
     controller: controller 
     }; 

     return directive; 

     controller.$inject = ['$scope', '$attrs', 'myService']; 
     function controller($scope, $attrs, myService) { 
     $scope.myService = myService; 

     // Exposes the Directive Controller on the parent Scope with name Directive's name 
     $scope.$parent[$attrs.directiveName] = this; 

     this.isValid = function() { 
      return $scope.myForm.$valid; 
     }; 

     this.setDirty = function() { 
      Object.keys($scope.myForm).forEach(function(key) { 
      if (!key.match(/\$/)) { 
       $scope.myForm[key].$setDirty(); 
       $scope.myForm[key].$setTouched(); 
      } 
      }); 

      $scope.myForm.$setDirty(); 
     }; 
     } 

    } 
})(); 

Answer 1

Изменить директиву на компонент и реализовать четкий интерфейс.

Parent Container (parent.html):

<form-component some-input="importantInfo" on-update="someFunction(data)">  
</form-component> 

контроллер Родитель (parent.js):

//... 

$scope.importantInfo = {data: 'data...'}; 
$scope.someFunction = function (data) { 
    //do stuff with the data 
} 

//.. 

form-component.js:

angular.module('app') 
.component('formComponent', { 
    template:'<template-etc>', 
    controller: Controller, 
    controllerAs: 'ctrl', 
    bindings: { 
    onUpdate: '&', 
    someInput: '<' 
    } 
}); 

function Controller() { 

    var ctrl = this; 
    ctrl.someFormThing = function (value) { 
    ctrl.onUpdate({data: value}) 
} 

} 

Так что, если событие в вашей форме вызывает функцию ctrl.someFormThing(data) , Это можно передать до родителя, вызвав ctrl.onUpdate().