Question

根据Rober C. Martin＆＃34;清洁代码＆＃34;我想知道如何在角度指令中封装功能。书。我想省略注释并使用带有说话名称的函数。

想象一下这段代码：

app.directive('myDirective' function() {

return  {
    link: function(scope) {

        // initialize visual user state
        scope.visualUserState = { 
             // some very detailed state initialization 
        } 
    }
})

为了封装加载功能，我想替换这样的代码：

app.directive('myDirective' function() {

return  {
    link: function(scope) {

        scope.initializeVisualUserState = function() {
            scope.visualUserState = { 
               // some very detailed state initialization 
            }
        }


        scope.initializeVisualUserState();

    }
})

第二种方法我不喜欢的是＆＃34; loadDataFromServer＆＃34;是一些仅由链接函数使用而不是由视图使用的功能，因此我违反了范围应仅包含用于与视图交互的数据和函数的规则。

我认为代码也不是很易读。

由于该功能处理指令的非常私密的东西，我认为使用和注入服务不是正确的方法。

封装此功能会有什么更好的做法？

Answer 1

您应该使用控制器为您的指令添加逻辑。在您的控制器中，您可以注入服务。为单一目的编写服务最好，只需让控制器调用服务即可。

事实上，如果你需要拥有你的DOM节点，你应该只使用链接功能，这实际上是非常接近的。

阅读John Papa撰写的styleguide

angular.module('myModule', []);

// Controller
(function() {
  angular
    .controller('myModule')
    .controller('MyController', ['$scope', 'DataService', function($scope, DataService) {
      DataService
        .retrieveData()
        .then(function(data) {
          $scope.visualUserState = data;
        });
    }]);
})();

// Directive
(function() {
  angular
    .module('myModule')
    .directive('myDirective', function() {
      return {
        'restrict': 'E',
        'scope': true,
        'controller': 'MyController',
        'controllerAs': '$ctrl'
      };
    });
})();

Answer 2

(function(module){
    module.directive('myDirective', myDirective);

function myDirective(){
  var directive = {
   link : link,
   scope : {state : '='},
   restrict : 'EA',
   template : //Some template which uses state
  }
  return directive;

  function link(){

  }
};

module.controller('myController', myController);
myController.$inject = ['$scope', 'OtherService'];

function myController(scope, service){
  //service is used to pull the data and set to $scope.userState.
}
})(angular.module('myApp'))

你的指令将是：

<myDirective state="userState"></myDirective>

如果有帮助，请告诉我。

Angular：如何在指令中封装逻辑？

2 个答案: