如何通过检查父范围来重构指令和更改功能?

How to refactor directive and change functionality by checking parent scopes?

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

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

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

起初我打算只为表单创建一个新的控制器,但 HTML 也被复制了,所以决定将其放入一个指令中,然后在其中添加控制器代码。


我现在的问题是: 我如何确定当前正在查看 form-directive 的父范围?因为根据父作用域 functions/methods 的行为不同。


到目前为止我已经想到了这个:

.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 看起来像 00200p 的 ID。根据该信息输入 if / else 语句不是很容易。

你们以前 运行 处理过这个问题吗?

您可以在指令范围内添加两种方式的绑定变量,这允许您指定哪个 Ctrl 变量绑定到哪个指令变量

<my-directive shared="scopeVariable">

通过这种方式,您可以实现 scopeVariable 与共享指令变量的双向绑定

你可以了解更多here

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

这是一个具有独立作用域并与外部作用域共享 'title' 变量的指令示例。

您可以这样声明此指令: 现在在指令中,您可以区分定义指令的位置;只需将标题变量替换为位置变量并选择更好的名称即可。

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

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

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

将其传递给指令
  scope: {
      user: '=',
      saveThis : '&'
    },

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