如何通过检查父作用域来重构指令和更改功能？

Question

我在2个不同的控制器中有一个具有大量重复功能的表单，两者之间存在细微的差异和一些主要的差异。

表单位于产品视图控制器的顶部，但也位于产品模态控制器内部。

测试plunker： http://plnkr.co/edit/EIW6xoBzQpD26Wwqwwap?p=preview
^如何根据父范围更改console.log中的字符串和按钮的颜色？

起初我打算为表单创建一个新的Controller，但HTML也是重复的，因此决定将其放入Directive中，只需在那里添加Controller代码。

---

我现在的问题是：如何确定当前正在查看form-directive的哪个父作用域？因为取决于父作用域，函数/方法的行为不同。

---

到目前为止，我已经提出了这个问题：

.directive('productForm', function() {
    return {
        templateUrl: "views/products/productForm.html",
        restrict: "E",
        controller: function($scope) {
            console.log('controller for productForm');
            console.log($scope);
            console.log($scope.$parent);

            /*
              If parent scope is the page, then this...

              If parent scope is the modal then this instead...
            */
        }
    }
});

然而，它会让我回复$parent个ID 002或00p。根据该信息输入if / else语句并不容易。

你们之前是否遇到过这个问题？

Answer 1

您可以在指令范围中添加双向绑定变量，这允许您指定哪个Ctrl变量绑定到哪个指令变量

<my-directive shared="scopeVariable">

通过这种方式，您可以实现scopeVariable与共享指令变量

的双向绑定

您可以了解更多here

我建议不要反对这种做法，并建议您在服务或工厂中而不是在指令中隔离常见的逻辑和行为

这是一个具有隔离范围并分享＆＃39;标题＆＃39;的指令的示例。变量与外部范围。

您可以这样声明此指令： 现在在指令中你可以区分定义指令的位置;只需用一个位置变量替换title变量，然后选择更好的名称。

.directive('myPane', function() {
  return {
    restrict: 'E',
    scope: {
      title: '@'
    },
    link: function(scope, element, attrs, tabsCtrl) {

    },
    templateUrl: 'my-pane.html'
  };
});

Answer 2

您可以在控制器中定义“saveThis”，并使用'&'

将其传递给指令

  scope: {
      user: '=',
      saveThis : '&'
    },

请在此处查看演示http://plnkr.co/edit/sOY8XZtEXLORLmelWssS?p=preview 这为您提供了更大的灵活性，如果您想在另一个控制器中使用saveThis，您可以在控制器中定义它，而不是在指令中添加额外的if语句。