Question

我有服务注入（我知道这不是很好的做法）DOM中的一些标记，如下所示：

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;
});

Plunker here。

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

1 个答案: