gpt4 book ai didi

javascript - 将变量传递给指令并 DRY?

转载 作者:行者123 更新时间:2023-12-03 06:12:32 29 4
gpt4 key购买 nike

我有一些代码(不是我的),其中包含带有声明的范围映射的指令。我的愿望是在其他地方使用该指令并传递将在模板中使用的附加变量。

我要传递的变量是theVar

我发现唯一可行的解​​决方案看起来很噩梦:

(function(angular) {
'use strict';

angular.module('theFoo', [])

.controller('Controller', ['$scope', function($scope) {
$scope.theVar = true;
}])

.directive('aDirective', function() {
return {
scope: {
'someVarThatWasHereBefore': '=',
'theVar': '='
},
template: '<p ng-show="theVar">You have successfully passed a boolean value!</p>'
};
});

})(window.angular);
<body ng-app="theFoo">
<div ng-controller="Controller">
<a-directive data-the-var="theVar"></a-directive>
</div>
</body>

有什么办法可以做到这一点,而无需在范围和 HTML 元素中重复变量名称四次

最佳答案

该代码看起来不错。至于重复变量名称四次 - 这就是 Angular 定义指令、向它们传递数据以及在模板中使用数据的方式。

定义和传递变量并不违反 DRY 原则。 DRY 更多的是不重写逻辑 block 。

要明确变量的命名 - 传递到指令中的变量不需要与其在指令范围内的名称相匹配。

(function(angular) {
'use strict';

angular.module('theFoo', [])

.controller('Controller', ['$scope', function($scope) {
$scope.myVar = true;
}])

.directive('aDirective', function() {
return {
scope: {
'someVarThatWasHereBefore': '=',
'theVar': '='
},
template: '<p ng-show="theVar">You have successfully passed a boolean value!</p>'
};
});

})(window.angular);
<body ng-app="theFoo">
<div ng-controller="Controller">
<a-directive data-the-var="myVar"></a-directive>
</div>
</body>

关于javascript - 将变量传递给指令并 DRY?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39255971/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com