javascript - Angular 指令不是从服务中调用的吗？

Question

我有一个服务，可以在 DOM 中注入(inject)一些标记(我知道这不是一个好的做法)，如下所示:

app.service('CustomChartOptions', function() {
    this.getOptions = function() {
        var chartOptions = {
            return '<span some-directive>' + this.name + '</span>';
        }
    }
});

这是我的自定义指令的代码:

app.directive('someDirective', function(){
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            // it never gets fired
        }
    }
 });

所以，问题是 someDirective 没有在运行时被调用。

Answer 1

问题是您只是创建一个字符串而不是实际的 DOM 元素。您需要使用指令编译元素，以便调用 link 函数。

var app = angular.module('myApp', []);

app.controller('myController', function($scope, CustomChartOptions) {
  $scope.element = CustomChartOptions.getElement();
});

app.directive('someDirective', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      alert('link function!');
    }
  }
});

app.service('CustomChartOptions', function($compile, $rootScope) {
  this.name = 'tom';
  this.getElement = function() {
      var compiledTemplate = $compile('<span some-directive>' + this.name + '</span>')($rootScope.$new());
      var elem = angular.element(compiledTemplate);
      return elem;
  };
  return this;
});

笨蛋here .