我是否滥用过多逻辑的指令？

Question

假设我从a获取了一个对象列表factory,将其传递给a controller,并从那里渲染出来directive......到目前为止,这是最佳实践,对吧？

假设每个对象都有一个save()函数,如果我的指令如下:

.directive('Foo', function($modal) {
    return {
        restrict: 'EA',
        require: 'ngModel',
        transclude: true,
        templateUrl: 'admin/foo.html',
        scope: {
            model: '=ngModel',
            save: '&'
        },
        controller: function($scope) {
            $scope.$watch('model', function(newVal, oldVal) {
                init()
            });
            function init(){
              // do some loops
            };
            $scope.doThis(){
             // click event
            }
           $scope.checkThat(){
             // some array methods
            }
           $scope.proxySave(){
             // call passed in fn();
             $scope.save({})
            }
        },
        link: function(scope, element, attr, ngModel) {
          // not really doing much here
        }

从指令html开始,将会有一些定义为ng-click的函数doThis().

从关注点分离的角度来看,我猜它会把东西从我的主控制器中删除,但是我在指令代码中并没有真正做很多DOM操作,除了在指令控制器中链接到模板HTML和一大堆逻辑.我的一些指令控制器大约有100行逻辑.

是因为我滥用ng-if's来显示/隐藏？我应该使用链接功能吗？

Answer 1

可能你的问题可能更像是表达意见,而不是提供"正确的解决方案".

如果指令没有公开可以被其他指令(require: "^myDirective")使用的逻辑,我个人不会向控制器引入控制器.所以我的大多数指令都有你在控制器中放入的代码link: function (scope, element, attrs) {}.

但是,如果有许多代码行与DOM操作无关,那么很可能它们包含一些非UI相关的业务逻辑,这些逻辑可以转移到服务中.有更好的重用机会和更清晰的关注点分离.

TL; DR

• 所有$scope.foo = function () { ... }可以住在link: function (...) {...}和
• 如果您需要控制器将某些API暴露给其他指令,请添加一个控制器: this.bar = function ()
• 尽可能多地将逻辑放入服务中.或者为模型添加逻辑(这在AngularJS应用程序中经常出现,但我认为没关系)

正如我已经说过的那样:这只是我的意见......

编辑: "为模型添加逻辑"是什么意思？

JavaScript不仅是一种函数式编程语言,也可以用于面向对象.当然没有"类",但是使用原型继承或ECMAScript 5功能(如getter和setter),可以创建一个外观和行为类似于Java或其他OOP语言的对象模型.

通常存在非常小的业务逻辑"片段",可以将其提供给控制器,服务,过滤器或指令.我不会将对象连接到大图并将所有逻辑(例如持久性逻辑)放到业务对象中.但是这些小的逻辑片段最好位于模型数据中,例如:

isExternal()
grossPrice
calculateFields()
roundToMinutes()

这给了我安全性,这种逻辑总是与"原始"数据一起出现,并且重复代码的风险较小.而且我不必总是将数据与正确的服务连接起来,并在视图中需要时在控制器或指令中公开这些服务.

编辑回答"我正在滥用ng-if来显示/隐藏？"

复杂UI必须显示/隐藏很多,具体取决于应用程序及其数据的状态.所以在实际应用中(不仅仅是小例子)还有很多ng-if和ng-show/ ng-hide或ng-switch.看起来并不总是好,但有什么替代方案？(ng-if如果您使用ng-if-start,有时可以节省几个s ng-if-end,请参阅多元素指令).