Question

我有几个非常相似的指令，它们共享一些代码。我正在寻找一种让这些指令继承共享代码的方法。

我正在考虑的方法是让每个指令的模板包含另一个带有共享代码的指令。有没有办法访问该模板的指令控制器？

app.directive('d1', function($compile) {
  return  {
    restrict: 'E',
    require: 'sharedCtrl', // Is anything like this possible?
    template: '<shared></shared>',
    link:function(scope,element,attr, sharedCtrl) {
        var res = sharedCtrl.getResult();
    }
  }  
});
app.directive('shared', function($compile) {
  return  {
    restrict: 'E',
    controller: function($scope, $element) {
       var resultObject = sharedCode();
       this.getResult = function() { return resultObject; };
    }
    link:function(scope,element,attr, sharedCtrl) {

    }
  }  
});

或者，是否有更好的方法来实现同样的目标？

编辑：共享代码操纵DOM（它注入一个传单地图，我想返回地图js对象），所以我认为最好将DOM操作保存在指令中。

Answer 1

这正是服务的用途。

将您的共享指令转换为服务并将其注入第一个。

app.directive('d1', function($compile, shared) {
  return  {
    restrict: 'E',
    template: '<shared></shared>',
    link:function(scope,element,attr) {
        var res = shared.getResult();
    }
  }  
});
app.factory('shared', function($compile) {
  var resultObject = sharedCode();
  return {
    getResult: function() { return resultObject; };
  }
});

Answer 2

我目前在指令模块中添加了一个执行共享DOM操作的函数。

JButton

工作正常，但我不确定它遵循多少或违反角度约定。

模板中指令的访问控制器

2 个答案: