如何通过检查父范围来重构指令和更改功能?
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
看起来像 002
或 00p
的 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 语句。
我有一个表单,在 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
看起来像 002
或 00p
的 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 语句。