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.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()传递给父母。

将指令控制器的方法绑定到其父$ scope

1 个答案: