Question

我已经构建了一个具有各种类型功能的复杂指令，并且JS代码已经扩展到500行代码。

有没有办法将指令的功能分成多个文件。

注意：使用服务不允许指令在同一视图中出现多次，因为服务不是单例。

为了在实际例子中工作，我创建了一个带有3个简单函数的简单指令：

angular
  .module("myApp")
  .directive("myDirective", myDirective);

function myDirective() {
  var template = 
  '<div style="font-size: {{vm.size}}; color: {{vm.color}}">{{vm.getUpperCase(vm.myText)}}</div>';
  var directive = {
    restrict: "EA",
    template: template,
    controller: myDirectiveCtrl,
    controllerAs: 'vm',
    bindToController: true,
    replace: true,
    scope: {
      myText: "@",
      color: "@",
      size: "@"
    },
  };
  return directive; 
}



function myDirectiveCtrl(){
  var vm = this;
  init();

  vm.getUpperCase = getUpperCase;

  function init(){
    vm.color = getColor();
    vm.size = getSize();
  }

  function getUpperCase(text){
    return text.toUpperCase();
  }

  function getColor(){
    return vm.color ? vm.color : "#F12";
  }

  function getSize(){
    return vm.size ? vm.size : "30px";
  }
}

我的目标是分离3个功能的功能并将它们放入自己的文件中。这可能吗？

这是plunkr的链接。 http://plnkr.co/edit/9tQzubu4qxudKkXIr5HK?p=preview

将一个AngularJS指令分成更多文件

0 个答案: